如何将 Json 数据返回到局部视图 [英] How to return Json data to a partial view

问题描述

我有一个使用布局页面的索引页面.在索引页面上，我有一个下拉列表和一个 div 部分用于托管部分视图.我这样做是因为我计划有大约 4 个链接和 4 个链接将加载不同的局部视图.

 
<label for="ddlCustomerNumber">客户编号:</label><select id="ddlCustomerNumber" name="ddlCustomerNumber"><option value="1001">1001</option><option value="1002">1002</option><option value="1003">1003</option><option value="1004">1004</option></选择>
<div id="pageContent"></div>

在 html 的脚本部分，我进行了 Ajax 调用这将获取 jason 数据，然后绑定检索到的字段在我加载的部分视图中存在的控件上.这个简单的意思在我的部分视图中，我有 customerfirstname、customerlastname 和 address 的文本框.

 $('#ddlCustomerNumber').change(function () {$.ajax({url: '@Url.Action("PopulateTextBoxes", "Home")',类型:获取"，数据: {"customerNumber": $(this).val(),"国家": $("#divcountry").text().trim()},成功:功能(数据){如果(数据！= null){for (var x = 0; x < data.length; x++) {$("#Customerfirstname").val(data[x].customerfirstname);$("#Customerlastname").val(data[x].Customerlastname);$("#Address").val(data[x].Address);}}}});});

这是获取我计划绑定到控件的json数据的方法以我的部分观点.

 public ActionResult PopulateTextBoxes(Int32 customerId, string country){尝试{var relatedCustomerInfo = GetOtherCustomerInfo(customerId, country, sRadSelection);返回 Json(relatedCustomerInfo, JsonRequestBehavior.AllowGet);}捕获(异常前){logger.Error(ex);返回视图(错误")；}}

问题:我知道我可以从 PopulateTextBoxes 方法返回一个局部视图，但因为我已经返回 json 这是不可能的.如何将此 json 数据返回到我的部分视图.

解决方案

看看这个链接 - 如何在MVC中使用AJAX加载部分视图

这是另一个例子:

Java 脚本:

$.get('@Url.Action("PopulateTextBoxes","Home", new { customerId = Model.ID } )', function(data) {$('#outputContainer').html(data);});

控制器:

public ActionResult PopulateTextBoxes(Int32 customerId, string country){尝试{var relatedCustomerInfo = GetOtherCustomerInfo(customerId, country, sRadSelection);return PartialView("~/Views/Home/_Partial.cshtml",relatedCustomerInfo);}捕获(异常前){logger.Error(ex);返回视图(错误")；}}

可能需要稍微调整一下以使其完全按照您想要的方式工作，但您似乎对 MVC 了解得足够好

I have an index page that uses a layout page. On the index page I have a dropdown and a div section for hosting partial views. I am doing it this way because I plan to have about 4 links and the 4 links will load different partial views.

         <div class="selectOption1" id="custNum">
               <label for="ddlCustomerNumber">Customer #:</label>
               <select id="ddlCustomerNumber" name="ddlCustomerNumber">
                 <option value="1001">1001</option>
                 <option value="1002">1002</option>
                 <option value="1003">1003</option>
                 <option value="1004">1004</option>    
               </select>
        </div>


        <div id="pageContent"></div>

In the script section of the html I am making an Ajax call that will fetch jason data and then bind the fields retrieved on the controls that exist in my loaded partial view. This simple means that in my partial view I have textboxes for customerfirstname,customerlastname and address.

         $('#ddlCustomerNumber').change(function () {         
                $.ajax({
                    url: '@Url.Action("PopulateTextBoxes", "Home")',
                    type: "GET",
                    data: {
                        "customerNumber": $(this).val(),
                        "Country": $("#divcountry").text().trim()
                    },
                    success: function (data) {
                        if (data != null) {
                            for (var x = 0; x < data.length; x++) {
                                $("#Customerfirstname").val(data[x].customerfirstname);
                                $("#Customerlastname").val(data[x].Customerlastname);
                                $("#Address").val(data[x].Address);                        
                            }
                        }
                    }
                });

            });

Here is the method that gets me the json data that I plan to bind to controls in my partial view.

              public ActionResult PopulateTextBoxes(Int32 customerId, string country)
                {
                    try
                    {
                        var relatedCustomerInfo = GetOtherCustomerInfo(customerId, country, sRadSelection);
                        return Json(relatedCustomerInfo, JsonRequestBehavior.AllowGet);
                    }
                    catch (Exception ex)
                    {
                        logger.Error(ex);
                        return View("Error");
                    }

                }

Question: I know I can return a partialview from my PopulateTextBoxes method but because I am already returning json this is not possible. How can I return this json data to my partial view.

解决方案

Have a look at this link - How to load partial views in MVC using AJAX

Here's another example:

Java script:

$.get( '@Url.Action("PopulateTextBoxes","Home", new { customerId = Model.ID } )', function(data) {
    $('#outputContainer').html(data);
}); 

Controller:

public ActionResult PopulateTextBoxes(Int32 customerId, string country)
{
    try
    {
        var relatedCustomerInfo = GetOtherCustomerInfo(customerId, country, sRadSelection);
        return PartialView("~/Views/Home/_Partial.cshtml",relatedCustomerInfo);
    }
    catch (Exception ex)
    {
        logger.Error(ex);
        return View("Error");
    }
}

Might have to tweak this a little to get it working exactly the way you want to but it seems like you know MVC well enough to come right

这篇关于如何将 Json 数据返回到局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！