從下拉控件中選擇後顯示項目在同一頁面

Question

我有一個控制器與Index行動，它返回ViewModel和GetCategories行動應該返回一個局部視圖。

因此，這裏是我的CategoryController.cs文件：

public class CategoryController : Controller 
    { 
     public ActionResult Index() 
     { 
      CategoryViewModel ob = new CategoryViewModel(); 
      ob.LoadLanguages(); 
      return View(ob); 
     } 



     public ActionResult GetCategories(int langID) 
     { 
      CategoryViewModel ol = new CategoryViewModel(); 
      ol.LoadCategoriesByLanguage(langID); 
      if (Request.IsAjaxRequest()) 
          return PartialView("GetCategories",ol); 

在我Index.cshtml鑑於我創建了一個下拉列表，然後，當用戶選擇一個元素，它使一個Ajax請求getCategories行動和成功，我應該加載GetCategories局部視圖。問題是它將我重定向到一個新頁面，我無法再看到我的下拉菜單。

這裏是我的Index.cshtml文件：

@model Onion.Web.ViewModels.CategoryViewModel 

<script> 
    $(document).ready(function() { 
     $("#ddlLanguages").change(function() { 
      $.ajax({ 
       type: 'GET', 
       url: '@Url.Action("GetCategories")' + '?langId=' + this.value, 
       data: {}, 
       success: callbackFuntion('@Url.Action("GetCategories")' + '?langId=' + this.value), 
       error: function() { alert('Error'); } 
      }); 
     }); 

    }); 

    function callbackFuntion(url){ 

     window.location = url; 
    } 
</script> 
@Html.DropDownList("Languages", new SelectList(Model.lstLanguages, "LanguageID", "Name"), "SELCT LANGUAGE----->",new { id = "ddlLanguages" }) 

      } 

這裏是我的Category.cshtml文件：

@model Onion.Web.ViewModels.CategoryViewModel 

<table> 
    <tr> 
     <td>ID</td> 
     <td>Title</td> 

    </tr> 
    @foreach (var item in Model.lstCategoryLanguages) 
    { 
     <tr> 
      <td>@item.Title</td> 
      <td>@item.ShortDescription</td> 
     </tr> 
    } 
</table> 


I can't beleve how easy it is in web forms and here i'm struggling for hours. Is there a better way to do all this. Thank you in advance 

Answer 1

，因爲你在你的成功回調執行重定向這是正常的。

你可以使用jQuery的加載函數在dom的div中加載你的局部視圖。

<div id="categoriesPlace"></div> 
<script> 
$(document).ready(function() { 
    $("#ddlLanguages").change(function() { 
     $("#categoriesPlace").load('@Url.Action("GetCategories")' + '?langId=' + this.value, function(response, status, xhr) { 
      if (status == "error") { 
       var msg = "Sorry but there was an error: "; 
       alert(msg + xhr.status + " " + xhr.statusText); 
      } 
     } 
    }); 
}); 
</script> 

Answer 2

我稍微修改了模型，並使其工作原型，從這裏你可以得到的概念，並將其應用到您的模型 -

模型 -

public class CategoryViewModel 
{ 
    public List<string> DDLItems { get; set; } 
} 

public class CategoryNewViewModel 
{ 
    public string Name { get; set; } 
} 

控制器 -

public class MyPartialController : Controller 
{ 
    public ActionResult Index() 
    { 
     CategoryViewModel ob = new CategoryViewModel(); 
     ob.DDLItems = new List<string>(); 
     ob.DDLItems.Add("1"); 
     ob.DDLItems.Add("2"); 
     ob.DDLItems.Add("3"); 
     return View(ob); 
    } 

    public ActionResult GetCategories(int langID) 
    { 
     CategoryNewViewModel ol = new CategoryNewViewModel(); 

     if (langID == 1) 
      ol.Name = "One"; 
     else if (langID == 2) 
      ol.Name = "two"; 
     else 
      ol.Name = "three"; 

     return PartialView("GetCategories", ol); 
    } 
} 

索引視圖 -

個

@model MVC.Controllers.CategoryViewModel 

@{ 
    ViewBag.Title = "Index"; 
} 

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $("#DDLCategories").change(function() { 
      $.ajax({ 
       type: 'GET', 
       url: '@Url.Action("GetCategories")', 
       data: {langID : $('#DDLCategories').val()}, 
       success: function (result) { $('#container').html(result); }, 
       error: function() { alert('Error'); } 
      }); 
     }); 

    }); 
</script> 

<h2>Index</h2> 

@Html.DropDownList("DDLCategories", new SelectList(Model.DDLItems), "--Choose any Item--") 

<div id="container"> </div> 

GetCategories管窺 -

@model MVC.Controllers.CategoryNewViewModel 

@Model.Name 

當您選擇下拉列表中的一個項目，那麼相應的partialview將在div加載。

輸出 -