MVC 3 использует частичный просмотр для добавления нового списка с помощью ajax

#ajax #asp.net-mvc #asp.net-mvc-3 #razor #partial-views

#ajax #asp.net-mvc #asp.net-mvc-3 #razor #частичные представления

Вопрос:

ИСПРАВЛЕНО, НО ТА ЖЕ ПРОБЛЕМА:

Я создаю сайт с помощью 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>
  

Ответ №1:

Я думаю, вам следует указать UpdateTargetId в своем AjaxOptions :

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

С помощью этого свойства вы указываете, какая часть страницы должна быть обновлена с помощью ответа от вызова AJAX. Используя код, который у вас есть сейчас, ASP.NET MVC не знает, какую часть страницы обновлять с помощью представления, возвращаемого вашим методом действия.

Комментарии:

1. Даже используя UpdateTargetId, я не могу получить правильные результаты. Форма явно публикует сообщения с использованием Ajax, но вместо обновления моей недавно созданной и идентифицированной таблицы она приводит меня к общему частичному представлению, которого даже не существует. Это в конечном итоге расстраивает.

2. Что вы подразумеваете под «общим частичным представлением, которого не существует»? Если возможно, попробуйте посмотреть, что именно отправляется на сервер и что возвращается (с помощью инструментов разработчика Chrome / IE / Firefox или Fiddler). Обычно это очень помогает при создании асинхронных веб-приложений.

Ответ №2:

Все в порядке. Итак, я исправил свою собственную проблему здесь. Кажется, у многих людей возникает такая же проблема. Исправление настолько простое, что я почувствовал себя очень глупо.

Все, что вам нужно сделать, это включить

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

В вашем _Layout или главном представлении. Без этого Ajax.BeginForm бесполезен и будет продолжать перенаправлять на PartialViewResult.

Ответ №3:

Я думаю, вы хотите указать необходимые параметры Ajax для замены содержимого формы создания списка, а именно идентификатор заменяемого элемента и режим обновления.