c# - 使用 Ajax 不显眼地渲染部分 View

Question

我有以下 View 和部分 View 。在索引操作方法中，我需要创建来呈现为部分 View 。基于this中的答案我尝试使用 Ajax 辅助方法(我发现 AJAX 和 JS 对我来说很难理解)。

@model IEnumerable<TEDALS_Ver01.Models.UserRight>

@{
ViewBag.Title = "Index";
}
<table class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.UserName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.UserCode)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.IsReader)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.IsEditor)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.IsExporter)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.IsAdmin)
    </th>
    <th></th>
</tr>
@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.UserName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.UserCode)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.IsReader)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.IsEditor)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.IsExporter)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.IsAdmin)
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.UserRightID }) |
        @Html.ActionLink("Details", "Details", new { id=item.UserRightID }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.UserRightID })
    </td>
</tr>
}

</table>
<p>
@Ajax.ActionLink("Creates", "Creates", "UserRights", new { area = "Creates" }, new AjaxOptions { UpdateTargetId="Creates"})
</p>
<div id="Creates">
@Html.RenderPartial("_Creates",Model);
</div>

部分 View

  @model TEDALS_Ver01.Models.UserRight
  @Scripts.Render("~/bundles/jqueryval")
  @using (Ajax.BeginForm("Creates", "Creates", new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace }))
 {
 @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
    @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
    @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })

    @Html.LabelFor(model => model.UserCode, htmlAttributes: new { @class = "control-label col-md-2" })
    @Html.EditorFor(model => model.UserCode, new { htmlAttributes = new { @class = "form-control" } })
    @Html.ValidationMessageFor(model => model.UserCode, "", new { @class = "text-danger" })

    @Html.LabelFor(model => model.IsReader, htmlAttributes: new { @class = "control-label col-md-2" })
    @Html.EditorFor(model => model.IsReader)
    @Html.ValidationMessageFor(model => model.IsReader, "", new { @class = "text-danger" })

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
   </div>
  }

<div>
@Html.ActionLink("Back to List", "Index")
</div>

执行时出现错误:

 Compilation Error
 Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

 Compiler Error Message: CS1502: The best overloaded method match for 'System.Web.WebPages.WebPageExecutingBase.Write(System.Web.WebPages.HelperResult)' has some invalid arguments

如有任何帮助，我们将不胜感激。我尝试以多种方式更改 RenderPartial 的参数，但没有成功。

评论

我已在布局中添加了所有脚本。

错误

 An exception of type 'System.InvalidOperationException' occurred in System.Web.Mvc.dll but was not handled in user code

 Additional information: The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[TEDALS_Ver01.Models.UserRight]', but this dictionary requires a model item of type 'TEDALS_Ver01.Models.UserRight'.

根据 Greg 的输入进行编辑

主视图

   @model IEnumerable<TEDALS_Ver01.Models.UserRight>
   @using TEDALS_Ver01.Models
   <p>
   @Html.ActionLink("Create New", "Create")
   </p>
   <table class="table">
   <tr>
   <th>
        @Html.DisplayNameFor(model => model.UserName)
   </th>
   <th>
        @Html.DisplayNameFor(model => model.UserCode)
   </th>
   <th>
        @Html.DisplayNameFor(model => model.IsReader)
   </th>
   <th>
        @Html.DisplayNameFor(model => model.IsEditor)
   </th>
   <th>
        @Html.DisplayNameFor(model => model.IsExporter)
   </th>
   <th>
        @Html.DisplayNameFor(model => model.IsAdmin)
   </th>
   <th></th>
  </tr>
  @foreach (var item in Model) {
  <tr>
    <td>
        @Html.DisplayFor(modelItem => item.UserName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.UserCode)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.IsReader)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.IsEditor)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.IsExporter)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.IsAdmin)
    </td>

    <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.UserRightID }) |
        @Html.ActionLink("Details", "Details", new { id=item.UserRightID }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.UserRightID })
    </td>
   </tr>
   }

   </table>

   <input type="button" value="Create" id="Creates" />
   <div id="Creates">
   @{  
   Html.Partial("_Creates",new TEDALS_Ver01.Models.UserRight());
   }
   </div>

我知道缺少一些应该用于正确处理的脚本。但我不知道应该在哪里添加脚本。我以前也遇到过同样的问题，但无法解决，我排除了使用脚本的部分。

我的“创建”按钮没有任何作用。在浏览器控制台中，我收到错误“未找到元素”。

Answer 1

您收到的错误消息说明

The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[TEDALS_Ver01.Models.UserRight]', but this dictionary requires a model item of type 'TEDALS_Ver01.Models.UserRight'

这表示您创建的 View 仅处理一个 UserRight但你给了它 List<UserRight> 。该错误似乎发生在您的主视图中:

<div id="Creates">
@Html.RenderPartial("_Creates",Model);
</div>

当前模型是一个集合，因此使用该对象渲染 _Creates.cshtml 将失败。

通常，解决这个问题的方法是循环模型

 @foreach(var modelItem in Model) {
  <div id="Creates">
    @Html.RenderPartial("_Creates", modelItem);
  </div>
 }

但在这种情况下，我认为这根本不是您想要的。

现在，如果您删除了对 RenderPartial 的调用，它可能会编译，并且当您单击 Creates 链接时，它将向 Creates 操作发送 GET，该操作将渲染其连接到的任何 View (这听起来像您在问题)。

然后，用户在部分填写表单并将其发布到 Creates 和 div#Creates然后再次替换为来自后期操作的任何 View 。

听起来您真正想要的是渲染表单，然后在发布表单时替换表单。为此，您首先必须删除 @Ajax.ActionLink因为你不想 div#Creates页面加载时替换为链接。您在正确的轨道上渲染该部分，但问题是您提供的对象。

您可以尝试给它一个空的 UserRight

<div id="Creates">
  @Html.Partial("_Creates", new TEDALS_Ver01.Models.UserRight());
</div>

但如果这不起作用，您需要为该 View 创建一个 ViewModel，其中包含您想要显示的 UserRight 列表以及表单可以使用的模板 UserRight。

---

作为旁注，因为我没有足够的点来评论 @dylan-slabbinck 答案，所以您想使用 @Html.Partial，而不是 @Html.RenderPartial。