Routing mit MVC Partial Views mit Ajax

Question

In meinem MVC-Projekt habe ich versucht, Teilansichten mit Ajax zu rendern, aber ich kann das Routing nicht darin erstellen. Wie kann man Routing in einer Ajax-basierten Teilansicht implementieren?

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

My View

<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> 

meine Route nicht angezeigt, wenn ich auf die Kategorie klicken. Es zeigt nur die Basis-URL und die Schaltfläche # irgendwann, wenn auf geklickt wird. Wie kann ich die Route anzeigen und die Seite nicht aktualisieren? Ich weiß, dass die Verwendung von eckigen oder irgendein Framework leicht zu implementieren ist, aber wie können wir das nur mit asp.net mvc tun.

Dies geschieht in der Regel auf meiner bearbeiten und Seite erstellen meine bearbeiten Methode

ist

[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); ; 
     } 

Wenn ich Attribut ermöglichen Routing es mein Controller-Methode nicht mehr aufrufen.

Answer 1

In Ihrem AJAX-Anruf ist ein Problem aufgetreten. Sie erstellen URL falsch. Bitte ersetzen URL-Teil wie folgt.

Deklarieren Sie Ihre URL in Ihrer Ansicht wie folgt und verwenden Sie diese Variable im AJAX-Aufruf.

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

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