MVC 3 使用局部视图添加带有 ajax 的新列表

Question

已修订但问题相同：

我正在使用 MVC 3 构建一个站点，但遇到了很大的障碍。在个人资料页面上，用户将能够创建其中心提供的新列表。我已经使用页面的“_CenterProfile”部分的部分视图创建了这个，它完美地工作。我已经实现了创建列表作为页面和模型的主要焦点，它也可以完美地工作。我想使用 Ajax 创建数据库条目以及填充或更新配置文件页面上显示的列表。这就是问题所在。

当我单击提交按钮而不是更新目标元素时，页面会翻转到不存在的“CreateListing”页面../Exchange/CreateListing。我要疯了，试图让它发挥作用，无论我尝试什么，它都会做同样的事情。列表被填充到数据库中，页面从 /Exchange/Profile 更改为 /Exchange/CreateListing。

我确信有人可以帮助我，我在最后期限内，克服这个头痛将节省我很多时间。

“个人资料”视图：

      @model Exchange.Models.CreateListingModel

@{
    ViewBag.Title = "Profile";
}

<h2>Profile</h2>

@Html.Action("_CenterProfile")

<br />
@using (Ajax.BeginForm("CreateListing", "Exchange", new AjaxOptions
{
    HttpMethod = "Get",
    UpdateTargetId = "centerListings",
    InsertionMode = InsertionMode.Replace
}))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>CreateListingModel</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.productName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.productName)
            @Html.ValidationMessageFor(model => model.productName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.forSale)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.forSale)
            @Html.ValidationMessageFor(model => model.forSale)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.forTrade)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.forTrade)
            @Html.ValidationMessageFor(model => model.forTrade)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.price)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.price)
            @Html.ValidationMessageFor(model => model.price)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.unit)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.unit)
            @Html.ValidationMessageFor(model => model.unit)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.catagoryID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.catagoryID)
            @Html.ValidationMessageFor(model => model.catagoryID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.description)
            @Html.ValidationMessageFor(model => model.description)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.imageURL)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.imageURL)
            @Html.ValidationMessageFor(model => model.imageURL)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.activeListing)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.activeListing)
            @Html.ValidationMessageFor(model => model.activeListing)
        </div>
    </fieldset>

    <p>
        <input type="submit" value="CreateListing" />
    </p>
}

    <table id="centerListings">

    </table>


<p>
    @Html.ActionLink("Edit", "Edit", new { /* id=Model.PrimaryKey */ }) |
    @Html.ActionLink("Back to List", "Index")
</p>

创建列表控制器：

public PartialViewResult CreateListing(CreateListingModel model)
{
    mmjc.CreateListing(model.catagoryID, model.productName, model.forSale, model.forTrade, model.price, model.unit, model.description, model.imageURL, model.activeListing);
    var listings = mmjc.GetCenterListings();
    return PartialView("_CenterListings", listings);
}

_CenterListings 部分视图：

@model IEnumerable<Exchange.Models.Listing>

<table id="centerListings">
    <tr>
        <th>
            CatagoryID
        </th>
        <th>
            ProductName
        </th>
        <th>
            ToSell
        </th>
        <th>
            ToTrade
        </th>
        <th>
            PricePerUnit
        </th>
        <th>
            Unit
        </th>
        <th>
            Description
        </th>
        <th>
            ImgPath
        </th>
        <th>
            ProfileID
        </th>
        <th>
            ActiveListing
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CatagoryID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProductName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ToSell)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ToTrade)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PricePerUnit)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Unit)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ImgPath)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProfileID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ActiveListing)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ListingsID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ListingsID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ListingsID })
        </td>
    </tr>
}

</table>

Answer 1

我认为你应该在AjaxOptions 中提供一个UpdateTargetId：

new AjaxOptions { HttpMethod = "Post",
                  UpdateTargetId = "idOfSomeHtmlContainer" }

使用此属性，您可以指定应使用来自 AJAX 调用的响应来更新页面的哪个部分。使用您现在拥有的代码，ASP.NET MVC 不知道要使用从您的操作方法返回的视图来更新页面的哪个部分。

Answer 2

大家好。所以我在这里解决了我自己的问题。似乎很多人都有同样的问题。修复如此简单，让我觉得很傻。

你所要做的就是包含

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

在您的 _Layout 或主视图中。没有它，Ajax.BeginForm 将毫无用处，并将继续重定向到 PartialViewResult。

Answer 3

我认为您想指定必要的 Ajax 选项来替换创建列表表单的内容 - 即要替换的元素的 Id 和更新模式。