title: Rendering a partial View with Ajax Unobtrusive
body: <p>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 <a href="https://stackoverflow.com/questions/11961374/partial-view-render-on-button-click">this</a> question I tried using Ajax helper methods(I find AJAX and JS so hard for me to comprehend). </p>
  
  <pre><code>@model IEnumerable&lt;TEDALS_Ver01.Models.UserRight&gt;
  
  @{
  ViewBag.Title = "Index";
  }
  &lt;table class="table"&gt;
  &lt;tr&gt;
      &lt;th&gt;
          @Html.DisplayNameFor(model =&gt; model.UserName)
      &lt;/th&gt;
      &lt;th&gt;
          @Html.DisplayNameFor(model =&gt; model.UserCode)
      &lt;/th&gt;
      &lt;th&gt;
          @Html.DisplayNameFor(model =&gt; model.IsReader)
      &lt;/th&gt;
      &lt;th&gt;
          @Html.DisplayNameFor(model =&gt; model.IsEditor)
      &lt;/th&gt;
      &lt;th&gt;
          @Html.DisplayNameFor(model =&gt; model.IsExporter)
      &lt;/th&gt;
      &lt;th&gt;
          @Html.DisplayNameFor(model =&gt; model.IsAdmin)
      &lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
  &lt;/tr&gt;
  @foreach (var item in Model) {
  &lt;tr&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.UserName)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.UserCode)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.IsReader)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.IsEditor)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.IsExporter)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.IsAdmin)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.ActionLink("Edit", "Edit", new { id=item.UserRightID }) |
          @Html.ActionLink("Details", "Details", new { id=item.UserRightID }) |
          @Html.ActionLink("Delete", "Delete", new { id=item.UserRightID })
      &lt;/td&gt;
  &lt;/tr&gt;
  }
  
  &lt;/table&gt;
  &lt;p&gt;
  @Ajax.ActionLink("Creates", "Creates", "UserRights", new { area = "Creates" }, new AjaxOptions { UpdateTargetId="Creates"})
  &lt;/p&gt;
  &lt;div id="Creates"&gt;
  @Html.RenderPartial("_Creates",Model);
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Partial View</strong></p>
  
  <pre><code>  @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 =&gt; model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
      @Html.EditorFor(model =&gt; model.UserName, new { htmlAttributes = new { @class = "form-control" } })
      @Html.ValidationMessageFor(model =&gt; model.UserName, "", new { @class = "text-danger" })
  
      @Html.LabelFor(model =&gt; model.UserCode, htmlAttributes: new { @class = "control-label col-md-2" })
      @Html.EditorFor(model =&gt; model.UserCode, new { htmlAttributes = new { @class = "form-control" } })
      @Html.ValidationMessageFor(model =&gt; model.UserCode, "", new { @class = "text-danger" })
  
      @Html.LabelFor(model =&gt; model.IsReader, htmlAttributes: new { @class = "control-label col-md-2" })
      @Html.EditorFor(model =&gt; model.IsReader)
      @Html.ValidationMessageFor(model =&gt; model.IsReader, "", new { @class = "text-danger" })
  
      &lt;div class="form-group"&gt;
          &lt;div class="col-md-offset-2 col-md-10"&gt;
              &lt;input type="submit" value="Create" class="btn btn-default" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    }
  
  &lt;div&gt;
  @Html.ActionLink("Back to List", "Index")
  &lt;/div&gt;
  </code></pre>
  
  <p>I get error while executing : </p>
  
  <pre><code> 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
  </code></pre>
  
  <p>Any help would be appreciated. I have tried changing the arguments for RenderPartial in many ways and found no success.</p>
  
  <p><strong>Comments</strong></p>
  
  <p>I have added all the scripts in my Layout.</p>
  
  <p><strong>Error</strong></p>
  
  <pre><code> 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'.
  </code></pre>
  
  <p><strong>EDIT based on the inputs from Greg</strong></p>
  
  <p>Main View</p>
  
  <pre><code>   @model IEnumerable&lt;TEDALS_Ver01.Models.UserRight&gt;
     @using TEDALS_Ver01.Models
     &lt;p&gt;
     @Html.ActionLink("Create New", "Create")
     &lt;/p&gt;
     &lt;table class="table"&gt;
     &lt;tr&gt;
     &lt;th&gt;
          @Html.DisplayNameFor(model =&gt; model.UserName)
     &lt;/th&gt;
     &lt;th&gt;
          @Html.DisplayNameFor(model =&gt; model.UserCode)
     &lt;/th&gt;
     &lt;th&gt;
          @Html.DisplayNameFor(model =&gt; model.IsReader)
     &lt;/th&gt;
     &lt;th&gt;
          @Html.DisplayNameFor(model =&gt; model.IsEditor)
     &lt;/th&gt;
     &lt;th&gt;
          @Html.DisplayNameFor(model =&gt; model.IsExporter)
     &lt;/th&gt;
     &lt;th&gt;
          @Html.DisplayNameFor(model =&gt; model.IsAdmin)
     &lt;/th&gt;
     &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;
    @foreach (var item in Model) {
    &lt;tr&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.UserName)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.UserCode)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.IsReader)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.IsEditor)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.IsExporter)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.IsAdmin)
      &lt;/td&gt;
  
      &lt;td&gt;
          @Html.ActionLink("Edit", "Edit", new { id=item.UserRightID }) |
          @Html.ActionLink("Details", "Details", new { id=item.UserRightID }) |
          @Html.ActionLink("Delete", "Delete", new { id=item.UserRightID })
      &lt;/td&gt;
     &lt;/tr&gt;
     }
  
     &lt;/table&gt;
  
     &lt;input type="button" value="Create" id="Creates" /&gt;
     &lt;div id="Creates"&gt;
     @{  
     Html.Partial("_Creates",new TEDALS_Ver01.Models.UserRight());
     }
     &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>My Create button doesn't do anything. In the Browser console I get the error Element not found.</p>