我正在尝试使用ajax创建表单和列表而不刷新页面

时间:2016-10-24 05:21:48

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

我正在申请一份申请表。我在一个视图中使用两个局部视图。其中一个是短代码的创建形式,另一个是列出具有分页的短代码。

这是我的创建表单,即部分视图

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

这是我的列表,也是部分视图

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

这是索引视图

@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")
}

这是控制器

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));
    }

问题在于,当我通过这个

  

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

到视图,此错误生成

  

传递到字典中的模型项是类型的   'PagedList.PagedList`1 [UniProject.Models.Short_Code]',但是这个   字典需要类型的模型项   'UniProject.Models.Short_Code'。

请帮忙怎么解决这个问题。欢迎任何帮助或协助。

0 个答案:

没有答案