使用 AJAX 传递模型和变量

Question

从主视图 (Category.cshtml) 调用部分视图 (_AddItem.cshtml) 以便在加载时将现有项目添加到页面。

我现在正在添加 AJAX，以便用户可以通过单击按钮将项目添加到页面中。当随后提交表单时，项目将被添加到模型中。

局部视图依赖于类别模型 (activeCategoryModel) 和两个变量。目前，这些正在通过以下方式从视图中成功传递：

Category.cshtml

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

我的问题是如何在使用 AJAX 时传递模型 (activeCategory) 和这两个变量？下面是我开始为 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>

在 javascript 中添加 AJAX 帖子

这不是必须的全功能代码，我只是尝试使用“数据”参数中的变量编写 AJAX 帖子。

$("#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 调用 partialView ，你必须是 render Html。因为 PartialView 返回了Html。

我认为 Ajax 请求中最重要的值是 dataType 和 第二个重点是在 div 元素中添加返回的 html 数据

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