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视图中，我创建了一个下拉列表，当用户选择一个元素时，它会向getCategories操作发出Ajax请求，并且在成功时我应该加载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

我稍微修改了你的模型并使其成为原型，从这里你可以得到这个概念并将其应用到你的模型中 -

模特 -

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

当您在Dropdownlist中选择一个项目时，相应的部分视图将被加载到div中。

输出 -

enter image description here

Answer 2

这是正常的，因为您在成功回调中执行重定向。

您可以使用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>

从下拉控件中选择后显示同一页面中的项目

2 个答案: