i am trying to have a create form and a list both working with ajax without refreshing page

问题

i am working on an application. i am using two partial view in a single view. one of them is a create form for shortcode and the other one lists the shortcodes having a pagination.

this is my create form which is partial view

@model UniProject.Models.Short_Code
<div id="formDiv">
@using (Ajax.BeginForm("Create", "Service", new AjaxOptions { HttpMethod = "post" , UpdateTargetId = "formDiv" }))
{
    <table>
        <tr>
            <td>@Html.LabelFor(model => model.ServiceCode)</td>
            <td>@Html.TextBoxFor(model => model.ServiceCode , new { @class = "form-control input-sm"})</td>
        </tr>
        <tr>
            <td></td>
            <td>@Html.ValidationMessageFor(model => model.ServiceCode , "", new { @class = "text-danger"})</td>
        </tr>
        <tr>
            <td>@Html.LabelFor(model => model.Service)</td>
            <td>
                @Html.DropDownList("Service"  ,new List<SelectListItem> {
                    new SelectListItem { Text = "Select" , Value = ""},
                    new SelectListItem { Text = "Package" , Value = "Package"},
                    new SelectListItem { Text = "Per-SMS" , Value = "Per-SMS"},
                    new SelectListItem { Text = "Barcode" , Value = "Barcode"}
                }, new { @class = "form-control input-sm" })
            </td> 
        </tr>
        <tr>
            <td></td>
            <td>@Html.ValidationMessageFor(model => model.Service , "" , new { @class = "text-danger"})</td>
        </tr>
        <tr>
            <td><input type="submit" value="Submit" class="btn btn-default btn-sm"/></td>
            <td>@ViewBag.Record</td>
        </tr>
    </table>
}

this is my list which is also a partial view

@model IEnumerable<UniProject.Models.Short_Code>
<table class="table table-condensed table-bordered table-hover table-striped">
<tr>
    <th>
        Shortcode
    </th>
    <th>
        Service
    </th>
</tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.ServiceCode)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Service)
        </td>
    </tr>
}

this is index view

@model PagedList.IPagedList<UniProject.Models.Short_Code>
@using PagedList.Mvc
<link type="text/css" rel="stylesheet" href="~/Content/PagedList.css" />
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<h3>Service Management</h3>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js">    </script>


<div class="col-lg-4">
    @Html.Partial("_shortcode_form") 
</div>
<div class="col-lg-8">
    @Html.Partial("_shortcode_table")
</div>


 <div id="pager">
 @Html.PagedListPager(
    Model ,
    page => Url.Action(
        "Index" ,
        new {
            page = page
        }
    )
 )
</div>


<script>
$(function () {
    $("#pager").on('click', 'a', function () {
        $.ajax({
            url: this.href,
            type: 'GET',
            cashe: false,
            success: function (respons) {
                $('#table').html(respond);
            }
        })
        return false;
    })
});
</script>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

this is controller

public ActionResult Index(int? page)
    {
        var codes = db.Codes.AsQueryable();
        codes = codes.OrderBy(c => c.Id);

        if (Request.IsAjaxRequest())
        {
            return PartialView("_shortcode_table",     codes.ToPagedList(pageNumber: page ?? 1, pageSize: 2));
        }
        return View(codes.ToPagedList(pageNumber: page ?? 1, pageSize: 2));
    }

the problem is that when i pass this

codes.ToPagedList(pageNumber: page ?? 1, pageSize: 2)

to the view, this error generates

The model item passed into the dictionary is of type 'PagedList.PagedList`1[UniProject.Models.Short_Code]', but this dictionary requires a model item of type 'UniProject.Models.Short_Code'.

please help how can is solve this issue. any help or assist would be welcome.

来源：https://stackoverflow.com/questions/40211195/i-am-trying-to-have-a-create-form-and-a-list-both-working-with-ajax-without-refr