Question

我使用JQuery Ajax在Asp.Net MVC Partial View中提交表单帖子。

部分视图位于引导选项卡中的一个选项卡内（有4个选项卡，每个选项卡都有其局部视图）。还有一个View，它涵盖了所有这些标签。并且有一个涵盖所有的布局。

这是部分视图封面内的Action方法调用View：

 @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填充dropdownlisfor。我添加了这些方法，因为部分视图中的dropdownlistfor在Ajax提交后给出了null异常。

loadBrands();
 getRates();

添加这些语句后，出现了问题。

提交后，部分视图变得很奇怪：Bootstrap nav-tabs不再可见。因为覆盖部分视图的视图根本不渲染。当我改变这一行时：

 return View(pcb);

到

return Partial View(pcb);

然后，仅渲染部分视图本身，独立于所有布局。

你能帮忙吗？感谢。

Answer 1

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

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

    public ActionResult GetXlFile(int? id)
    {
        return View();
    }

共享中的

_ExcelGrid.cshtml：

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>

在JQuery Ajax提交后，部分视图无法正常呈现

1 个答案: