使用ajax進行MVC部分視圖路由

-1

在我的MVC項目中，我嘗試使用ajax渲染部分視圖，但我無法在其中創建路由。如何在基於ajax的局部視圖中實現路由。使用ajax進行MVC部分視圖路由

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>

當我點擊類別按鈕我的路線不顯示。它只顯示基址和＃點擊按鈕的某個時間。我如何顯示路線並不刷新頁面。我知道使用角度或任何框架易於實現，但我們如何使用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); ; 
     }

當我能屬性路由它停止叫我的控制器方法。

來源

2017-07-25 Dummy

你是什麼意思_my路由不顯示_？你在期待什麼。你的'Edit（）'方法與這個問題有什麼關係 - 你不會在你顯示的代碼中的任何地方調用。 –

您的Edit（int？id）操作將可爲空的整數作爲參數。那麼爲什麼在post調用中你試圖傳遞所有形式爲「data：$（」＃frmAddEditCategory「）。serialize（），」？您正嘗試在「類別」控制器中調用「SaveCategory」操作。但是您正在向我們展示「修改」操作。爲什麼？ –

我找不到在視圖頁面中調用「編輯」操作方法的任何方法。你也試圖傳遞序列化的數據（即查詢字符串），但是你的POST方法只接受'可空''。請注意，'RouteAttribute'通常用於GET或重定向，而不是POST方法。 –

-1

您的AJAX調用存在問題。你錯誤地創建了URL。請將替換爲這樣的URL部分。

在你的View中聲明你的URL，並在AJAX調用中使用這個變量。

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

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

來源

2017-07-25 05:01:35 Dilip

Downvoter發送正確的評論 – Dilip

OP的代碼生成的網址是好的。它沒有必要聲明一個單獨的變量（這與問題無關） –

你檢查過嗎？ – Dilip

使用ajax進行MVC部分視圖路由

回答

相關問題