使用Ajax Unobtrusive渲染部分视图

时间:2015-10-06 09:08:57

标签: c# ajax asp.net-mvc-5 asp.net-mvc-partialview unobtrusive-ajax

我有以下视图和部分视图。在索引操作方法中,我需要将Create创建为部分视图。基于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>

部分视图

  @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>

我理解一些应该用来纠正它的脚本。但我不知道应该在哪里添加脚本。我以前遇到过同样的问题但无法解决我排除使用脚本的部分。

我的“创建”按钮不执行任何操作。在浏览器控制台中,我收到错误元素未找到。

2 个答案:

答案 0 :(得分:3)

您获得的错误消息

  

传入字典的模型项目类型为   'System.Collections.Generic。的列表`1 [TEDALS_Ver01.Models.UserRight]',   但是这个词典需要一个类型的模型项   'TEDALS_Ver01.Models。的 UserRight

这就是说您创建的视图只处理一个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,该操作将呈现其连接的任何视图(这听起来就像您在其中发布的部分问题)。

然后,用户填写部分表单并将其POST给Creates,然后div#Creates再次替换为来自后期操作的任何视图。

听起来你真正想要的是呈现表单,然后在表单发布时替换表单。要做到这一点,您首先必须删除@Ajax.ActionLink,因为您不希望在页面加载时用链接替换div#Creates。你在正确的轨道上渲染那部分,但问题是你给它的对象。

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

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

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

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

答案 1 :(得分:1)

@{ Html.RenderPartial("_Creates", Model);}

一样使用它

Html.Render...助手返回void,这可能是您收到错误的原因