Пройдите модель и переменные с AJAX

Question

Частичное представление (_AddItem.cshtml) вызывается из основного представления (Category.cshtml) для добавления существующих элементов на страницу при загрузке.

Теперь я добавляю AJAX, чтобы пользователь мог добавить элемент на страницу одним нажатием кнопки.При последующем отправлении формы элемент будет добавлен в модель.

Частичное представление основано на модели категории (activeCategoryModel) и двух переменных.В настоящее время они успешно передаются из представления следующим образом:

Category.cshtml

@Html.Partial(
    "_AddItem", 
    activeCategoryModel, 
    new ViewDataDictionary(ViewData) { { "itemIndex", itemIndex }, { "itemLabel", itemLabel } }
);

Мой вопрос заключается в том, как передать модель (activeCategory) и эти двапеременные при использовании AJAX?Ниже приведен код, который я начал писать для поста AJAX:

Кнопка и входы, добавленные для просмотра (Category.cshtml)

<input id="add-item-label" type="text" />
<input id="nextItemIndex" type="hidden" value="@activeCategoryModel.Items.Count" />
<button id="add-item" type="button">Add Item</button>

Пост AJAX, добавленный в javascript

Это не обязательный полностью функциональный код, я только что попытался написать запись AJAX с переменными в параметре 'data'.

$("#add-item").click(function () {    
            var itemIndex = $("#nextItemIndex").val();  
            var itemLabel = $("#add-item-label").val();
            $.ajax({  
                type: "POST",  
                url: '@Url.Action("_AddItem")',  
                data: '{{itemIndex: ' + itemIndex + '}, {itemLabel: ' + itemLabel + '}}',  
                dataType: "json",  
                contentType: "application/json; charset=utf-8",  
                success: function () {  
                    $("#nextItemIndex").val($("#nextItemIndex").val() + 1);
                },  
                error: function () {  
                    alert("Error while adding item");  
                }  
            });  
            return false;  
        });  

В контроллер добавлен вызов частичного просмотра

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

public ActionResult _AddItem(string itemIndex, string itemLabel)
        {

            return PartialView();
        }

Частичное представление (_AddItem.cshtml)

Это не было изменено для сообщения AJAX.

@model CategoryModel

@{ int i = (int)ViewData["itemIndex"];}
@{ string l = (string)ViewData["itemLabel"];}

...

Answer 1

В этом случае существуют разные способы,

Пример : Html.RenderPartial Непосредственное визуальное частичное действие без ajax.

Если вы хотите использовать AjaxЧтобы вызвать частичный просмотр, вы должны сделать Html.Поскольку PartialView вернул Html.

Я думаю, что наиболее важным значением в запросе Ajax является dataType, а вторым важным моментом является добавление возвращенных данных html в элемент div

jQuery("#add-item").click(function () {
              var dItemIndex = 1; //$("#nextItemIndex").val();
              var dItemLabel = "Text"; // $("#add-item-label").val();

            $.ajax({
                type: "POST",
                url: '@Url.Action("_AddItem","Home")',
                data: { itemIndex: dItemIndex, itemLabel: dItemLabel },
                dataType: "html",
                //contentType: "application/json; charset=utf-8",
                success: function (d) {
                    console.log("Success");
                    $("#partialData").html(d);
                   **// Create div in cshtml Page
                   // <div id="partialData"></div>**

                },
                error: function () {
                    alert("Error while adding item");
                }
            });
            return false;
        });

На стороне controller вы можете прочитать параметры, заполнить содержимое и отправить PartialView следующим образом.

 public ActionResult _AddItem(string itemIndex, string itemLabel)
        {
            ViewData["itemIndex"] = itemIndex;
            ViewData["itemLabel"] = itemLabel;
            return PartialView(new CategoryModel { Id = 5, Text = "Sample 5" });
        }