使用 ajax 使用 MVC 部分视图进行路由

Question

在我的 MVC 项目中，我尝试使用 ajax 渲染部分视图，但我无法在其中创建路由。如何在基于 ajax 的局部视图中实现路由。

 public ActionResult ViewResult(string view, object viewModel)
    {
        if (Request.IsAjaxRequest())
        {
            return PartialView(view, viewModel);
        }
        return View(view, viewModel);
    }

我的观点

    <div class="row">

    <div class="x_panel">
        <div class="x_title">
            Category
        </div>
        <div class="x_content">
            <form method="post" id="frmAddEditCategory" data-parsley-validate class="form-horizontal form-label-left">
                <div class="form-horizontal">
                    @Html.HiddenFor(model => model.CategoryID, new { @id = "hdnCategoryId" })
                    @Html.ValidationSummary(true)
                    <div class="form-group">
                        @Html.LabelFor(model => model.CategoryName, new { @class = "control-label col-md-2" })
                        <div class="col-md-4">
                            @Html.TextBoxFor(model => model.CategoryName, new { @class = "form-control", @id = "txtCategoryName" })
                            @Html.ValidationMessageFor(model => model.CategoryName)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" })
                        <div class="col-md-4">
                            @Html.TextBoxFor(model => model.Description, new { @class = "form-control", @id = "txtDescription" })
                            @Html.ValidationMessageFor(model => model.Description)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2">   </div>
                        <div class="col-md-4">
                            <a id="btnSaveCategory" class="btn btn-primary btn-saveCategory" name="btnSave">Save</a>
                            <a id="btnCancel" class="btn btn-white btn-cancelCategory" name="btnCancel">Cancel</a>
                        </div>
                    </div>
                </div>
            </form>
</div>
</div>
</div>
<script>
    $(document).ready(function () {
        debugger;
        $("#btnSaveCategory").click(function () {
            debugger;
            $("#frmAddEditCategory").removeData("validator");
            $("#frmAddEditCategory").removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse("#frmAddEditCategory");
            if ($("#frmAddEditCategory").valid()) {
                $.ajax({
                    url: "@Url.Action("SaveCategory", "Category")",
                    type: "post",
                    data: $("#frmAddEditCategory").serialize(),
                    success: function (data) {
                        debugger;
                        $('#main-content').html(data);
                },
                error: function (a,b,c) {
                    $('#main-content').html('there is error while submit');
                }
            });
        }
        });

    $("#btnCancel").click(function () {
        $('#main-content').load("@Url.Action("Index", "Category")");
    });
    });
</script>

当我单击类别按钮时，我的路线未显示。它只显示基本 url 和 # sometime if 按钮被点击。我怎样才能显示路线而不刷新页面。我知道使用 angular 或任何框架很容易实现，但是我们如何仅使用 asp.net mvc 来做到这一点。

这通常发生在我的编辑和创建页面上 我的编辑方法是

 [HttpPost]
        //[Route("CategoryEdit/{id}/Edit")]
        //[Route("CategoryEdit/{id}")]
        //[Route("CategoryEdit/{id:range(1, 3)}")]
        // GET: /Category/Edit/5
        public ActionResult Edit(int? id)
        {
            var category = categoryService.GetCategory(id.Value);
            return ViewResult("_CategoryAddEdit", category); ;
        }

当我启用属性路由时，它会停止调用我的 Controller 方法。

Answer 1

您的 AJAX 调用存在问题。您正在以错误的方式创建 URL。请 像这样替换 URL 部分。

像这样在你的视图中声明你的 URL 并在 AJAX 调用中使用这个变量。

var categoryUrl = '@Url.Action("SaveCategory", "Category")',

$.ajax({
     url: categoryUrl ,
     type: "post",
     data: $("#frmAddEditCategory").serialize(),
     success: function (data) {
        debugger;
        ('#main-content').html(data);
      },