Question

点击输入类型=“提交”按钮后，我无法更新部分视图的内容。我希望只刷新局部视图并用更新的模型（控制器代码）填充它，而不是刷新整个页面。但是目前我只能在这些情况下查看我更新的模型属性：

提交后刷新整页（通过控制器中的返回View（））Image 1
提交后仅显示部分视图（通过在控制器中返回PartialView（））Image 2

在我看来，JQuery调用未正确实现，它在调试模式下触发。我在_Layout.cshtml页面中加载/渲染所有Javascript文件。 另请注意：我还是尝试启用＃btn-plus，我知道这一点。（如果需要，我在底部添加了2个屏幕截图以供澄清）

LoadPartialCalc.js

$("btn-plus").on("click", function () {
    $.ajax({
        url: "/Home/CalculationValidation",
        type: "POST",
        success: function (result) {
            $('#dvCalculationResult').html(result);
        }
    })
});

CalculationValidation.cshtml

@using MVCPluginTest.Models
@model MVCPluginTest.Models.CalculatorModel

@{
    ViewBag.Title = "Validation master Page";
}


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Validation</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
</head>
<body>
    <div id="containter">
        <h2>Validation</h2>
        @using (Html.BeginForm("#ValidationForm"))
        {
            @Html.ValidationSummary(true)
            <fieldset>
                <p>@Html.LabelFor(model => model.Number1)</p>
                <p>@Html.EditorFor(model => model.Number1) @Html.ValidationMessageFor(model => model.Number1)</p>

                <p>@Html.LabelFor(model => model.Number2)</p>
                <p>@Html.EditorFor(model => model.Number2) @Html.ValidationMessageFor(model => model.Number2)</p>

                <p><input type="submit" value="+" name="operation" id="btn-plus"/></p>
                <p><input type="submit" value="-" name="operation" id="btn-minus"/></p>
                <p><input type="submit" value="*" name="operation" id="btn-multiply"/></p>
                <p><input type="submit" value="/" name="operation" id="btn-divide"/></p>

                @Html.ValidationMessageFor(model => model.Result)

             </fieldset>
        }
    </div>
    <div id="dvCalculationResult">
        @{ Html.RenderPartial("CalculationPartial", @Model); }
    </div>  

</body>
</html>

_Layout.cshtml（只有标题很重要）

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/modify-calc-input-style")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modify-calc-input-style")
    @Scripts.Render("~/bundles/LoadPartialCalc")
</head>

HomeController.cs

#region /Home/CalculationValidation
public ActionResult CalculationValidation()
{
    return View(new CalculatorModel());
}
[HttpPost]
public ActionResult CalculationValidation(CalculatorModel valModel, string operation)
{
    var num1 = valModel.Number1;
    var num2 = valModel.Number2;
    if (operation == null)
    {
        ModelState.AddModelError("Operation", "No operation type selected");
        return View();
    }
    else
    {
        if (ModelState.IsValid)
        {
            switch (operation)
            {
                case "+":
                    valModel.Result = num1 + num2;
                    break;
                case "-":
                    if (ValidateNumbers(num1, num2, "-"))
                    {
                        valModel.Result = num1 - num2;
                    }
                    else
                    {
                        valModel.Result = 0;
                        ModelState.AddModelError("Result", "Minus can't be lower than 0");
                    }
                    break;
                case "*":
                    valModel.Result = num1 * num2;
                    break;
                case "/":
                    if (ValidateNumbers(num1, num2, "/"))
                    {
                        valModel.Result = num1 / num2;
                    }
                    else
                    {
                        valModel.Result = 0;
                        ModelState.AddModelError("Result", "Division not whole.");
                    }
                    break;
                default:
                    valModel.Result = 0;
                    break;
            }
        }
    }
    return PartialView("CalculationPartial", valModel);
}
#endregion

CaclculationPartial.cshtml

@using MVCPluginTest.Models
@model MVCPluginTest.Models.CalculatorModel

<h2>Result</h2>
<p id="result">@Model.Result</p>

CalculatorModel

public class CalculatorModel
{
    [Required(ErrorMessage = "Please enter a number.")]
    [Display(Name = "Number 1")]
    [RegularExpression(@"^[0-9]*$", ErrorMessage = "You can only enter numbers above 0.")]
    public double Number1
    {
        get;
        set;
    }
    [Required(ErrorMessage = "Please enter a number.")]
    [Display(Name = "Number 2")]
    [RegularExpression(@"^[0-9]*$", ErrorMessage = "You can only enter numbers above 0.")]
    public double Number2
    {
        get;
        set;
    }
    public string OperationType
    {
        get;
        set;
    }
    public double Result
    {
        get;
        set;
    }
}

Partial view before submit click

Partial view after submit click (main content gone)

提前感谢您的帮助！

Sandip Patel最初的回复之后更新： 单击提交按钮（＃btn-plus）后，将使用参数“Length = 15”进行重定向（URL变为：Home / CalculationValidation？Length = 15）。只有partialView加载到不同的页面上（没有主要内容）。我认为这与我开始表格的方式有关。

@using (Html.BeginForm("#ValidationForm"))

当我用

@using (Html.BeginForm("CalculationValidation", "Home", FormMethod.Post))

页面进行计算但完全重新加载（主要内容和PartialView）。我不确定对URL的更改是否导致我的PartialView无法正确更新，那么我也不确定为什么它首先会改变URL。

Answer 1

在表单提交上设置 event.preventDefault（），它会限制页面刷新。

$（＆＃34;＃ValidationForm＆＃34;）。serialize（）将序列化您的数据并传递给您的操作。

$("#ValidationForm").submit(function (event) {
event.preventDefault();       

$.ajax({
    url: '@Url.Action("CalculationValidation", "Home")',
    dataType: 'json',
    data: $("#ValidationForm").serialize(),
    type: 'POST',
    success: function (result) {
        $("#dvCalculationResult").html(result);
    },
    error: function (xhr) {
    }
});
});

仅在提交后点击

1 个答案: