渲染与阿贾克斯不显眼的局部视图 [英] Rendering a partial View with Ajax Unobtrusive

问题描述

我有以下视图和局部视图。在该指数的操作方法，我需要创建以呈现为一个局部视图。基于在这个的问题，我尝试使用Ajax helper方法的答案（我发现AJAX和JS所以我很难COM prehend）。

I have the following View and Partial View. In the index action method I need the Create to rendered as a Partial View. Based on the answer in this question I tried using Ajax helper methods(I find AJAX and JS so hard for me to comprehend).

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

我得到错误而执行

I get error while executing :

 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

任何帮助将是AP preciated。我试图改变在许多方面的RenderPartial的参数，发现没有成功。

Any help would be appreciated. I have tried changing the arguments for RenderPartial in many ways and found no success.

评论

我在布局添加的所有脚本。

I have added all the scripts in my Layout.

错误

 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'.

基础上，投入格雷格修改

主视图

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

据我了解一些脚本，应该用得到它的权利缺失。但我不知道应该在哪里添加的脚本。我也碰到过同样的问题前无法解决我排除使用脚本的部分。

I understand some scripts that should be used to get it right is missing. But I don not know where the scripts should be added. I have come across the same problem before and unable to resolve I excluded the part that used scripts.

我的创建按钮不会做任何事情。在浏览器控制台我得到的错误找不到元素。

My Create button doesn't do anything. In the Browser console I get the error Element not found.

推荐答案

这是你得到国家的错误信息

The error message that you get states

传递到字典中的型号产品类型   System.Collections.Generic。列表`1 [TEDALS_Ver01.Models.UserRight]'，   但是这本词典的需要类型的示范项目   TEDALS_Ver01.Models。 UserRight

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'

这是说，你创建的视图只处理一个 UserRight ，但你给它一个名单，其中，UserRight＆GT; 。该错误似乎在这里发生在你的主要观点：

This is saying that the view you created only handles one UserRight but you gave it a List<UserRight>. The error seems to happen here in your main view:

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

目前的模式是一个集合，以便使_Creates.cshtml与该对象将会失败。

The current Model is a collection so rendering _Creates.cshtml with a that object will fail.

通常情况下，解决这个问题的办法是遍历模型

Normally, the way around this is to loop over model

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

但在这种情况下，的我不认为这是你想要的所有东西的。

现在，如果你删除了调用的RenderPartial它可能会编译并当您单击创建链接时，它将发送一个GET到创建行动，这将使得无论查看其连接到（这听起来像你张贴在局部的问题）。

Right now if you deleted the call to RenderPartial it will likely compile and when you click the Creates link it will send a GET to the Creates action which will render whatever view its wired to (which sounds like the partial you posted in your question).

然后用户填写的部分和其发布的形式来创建和 DIV＃创建然后再与任何观点来自后行动所取代。

The user then fills out the form in the partial and POSTs it to Creates and the div#Creates is then replaced again with whatever view comes from the post action.

这听起来像你真正想要的是渲染表格，然后替换形式时，它的帐。要做到这一点，你首先必须删除 @ Ajax.ActionLink ，因为你不希望 DIV＃创建通过在页面加载链接时被替换。你是在正确的轨道渲染部分，但问题是对象，你给了它。

It sounds like what you really want is to render the form and then replace the form when it's POSTed. To do that you'll first have to remove the @Ajax.ActionLink since you don't want div#Creates to be replaced by a link when the page loads. You're on the right track rendering that partial, but the problem is object you gave it.

您可以尝试给它一个空UserRight

You can try giving it an empty UserRight

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

但如果不工作，你需要创建一个视图模型为视图包含您想要显示以及模板UserRight您的窗体可以使用UserRights名单。

But if that doesn't work you'll need to create a ViewModel for that view that contains the list of UserRights you want displayed as well as a template UserRight that your form can use.

作为一个方面说明，因为我没有足够的分@迪伦 - slabbinck答案发表评论，您要使用@ Html.Partial，不@ Html.RenderPartial。

As a side note, because I don't have enough points to comment on @dylan-slabbinck answer, you want to use @Html.Partial, not @Html.RenderPartial.

这篇关于渲染与阿贾克斯不显眼的局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！