Fatal编程技术网
  • ajax/
  • JQuery Ajax提交后，部分视图未正确呈现

JQuery Ajax提交后，部分视图未正确呈现

ajax asp.net-mvc view

JQuery Ajax提交后，部分视图未正确呈现,ajax,asp.net-mvc,view,partial-views,asp.net-mvc-partialview,Ajax,Asp.net Mvc,View,Partial Views,Asp.net Mvc Partialview,我使用jQueryAjax在Asp.NETMVC部分视图中提交表单帖子 部分视图位于引导选项卡中的一个选项卡内（共有4个选项卡，每个选项卡都有其部分视图）。还有一个视图，它覆盖了所有这些选项卡。还有一个布局涵盖了所有方面 这是封面视图内的局部视图操作方法调用： @Html.Action("AddProductPartial", "Products") 局部视图操作： [HttpPost] public ActionResult AddProductPartial(Produ

我使用jQueryAjax在Asp.NETMVC部分视图中提交表单帖子

部分视图位于引导选项卡中的一个选项卡内（共有4个选项卡，每个选项卡都有其部分视图）。还有一个视图，它覆盖了所有这些选项卡。还有一个布局涵盖了所有方面

这是封面视图内的局部视图操作方法调用：

 @Html.Action("AddProductPartial", "Products")
局部视图操作：

 [HttpPost]
        public ActionResult AddProductPartial(ProductCategoryBrand pcb)

        {
            if (ModelState.IsValid)
            {
                Product p = new Product();
                p.CategoryID = Convert.ToInt32(pcb.CategoryViewModel.Kategori);
                p.BrandID = Convert.ToInt32(pcb.BrandViewModel.BrandName);
                p.ExchangeName = pcb.ExchangeViewModel.ExchangeName;

               ProductRepository prep = new ProductRepository();
                prep.AddProduct(p)
            }
            loadBrands();
            getRates();

            return View(pcb);

        }
JQuery Ajax：

$('#saveProduct').click(function () {

    $.ajax({
        url: "/Products/AddProductPartial",
        type: 'POST',          
        data: "{'CategoryID':" + categoryID + ", 'BrandID':" + brandID + ",'ExchangeName':" + exchangeName + "}",
        async:true,            
        contentType: "application/json; charset=utf-8",
        dataType: "json",         
        success: function (data) {
            alert("success");
        },
        error: function (xhr, status, error) {
            alert(xhr.responseText)

        }
    });
});
下面的这些语句从db填充DropDownlisf。我添加这些方法是因为部分视图中的dropdownlistfor在Ajax提交后给出了null异常

loadBrands();
 getRates();
添加这些语句后，出现了问题

提交后，局部视图呈现怪异：引导导航选项卡不再可见。因为覆盖局部视图的视图根本不渲染。当我更改此行时：

 return View(pcb);
到

然后仅渲染局部视图本身，独立于“全部”布局

你能帮忙吗。谢谢。

以下是局部视图的最简单示例：

public class HomeController : Controller
{
    [HttpPost]
    public PartialViewResult GetXlFile()
    {
        return PartialView("_ExcelGrid");
    }

    public ActionResult GetXlFile(int? id)
    {
        return View();
    }
_共享中的ExcelGrid.cshtml：

A Partial View Info
视图：


@*归功于
https://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor*@
Index800
$（函数（）{
$（'#pvButton'）。单击（函数（事件）{
$.ajax({
url:this.action，
类型：“POST”，
数据：$（this）.serialize（），
成功：功能（结果）{
$（'#result'）.html（result）；
}
});
返回false；
});
});
我可以看看ajax代码吗？也许在ajax函数的成功回调中，您正在替换整个网页，而不仅仅是包含部分内容的HTML元素@ChristopherMMiller我缩短了参数，因为此处的代码似乎太长。您可能应该将
@Html.Action（“AddProductPartial”，“Products”）
替换为
@Html.Partial（“AddProductPartial”）
和您的
public ActionResult AddProductPartial
应该只返回一个Json对象，其中包含成功/错误/新产品ID等有用信息etc@JamieD77我尝试了
@Html.Partial（“AddProductPartial”）
，但这样操作方法（Get）没有调用。当我编写类似于
returnjson（new{data=1}，JsonRequestBehavior.AllowGet）的代码时这一行导致空页只写{“数据”：1}返回返回视图（pcb）；替换为json值数据，即

A Partial View Info



<!DOCTYPE html>
@*credit to
    https://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor*@
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index800</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#pvButton').click(function (event) {
                $.ajax({
                    url: this.action,
                    type: "POST",
                    data: $(this).serialize(),
                    success: function (result) {
                        $('#result').html(result);
                    }
                });
                return false;
            });
        });
    </script>
</head>
<body>
    <form>
        <div>
            <input id="pvButton" type="button" value="OK" />
            <div id="result"></div>
        </div>
    </form>
</body>
</html>