在布局页面下拉列表 - MVC

时间:2014-01-28 13:56:01

标签: c# asp.net-mvc asp.net-mvc-4 razor

我的问题:布局页面的下拉列表。

我读过这篇文章:ASP.NET MVC Razor pass model to layout它或多或少与我的问题类似。 Mattias Jakobsson在其中一篇评论中写道:“但一个常见的解决方案是使用RenderAction在布局页面中渲染需要自己数据的部件”。 好吧,我已经用@ Html.Action()创建了布局页面,它使用db中的日期渲染我的drop dwon列表。一切都很完美。但是......

  1. 我有两页,例如:'主页','关于'和我在布局页面的下拉列表(ddl)
  2. 当我在'家'并且我在ddl中更改了选择时,如何刷新'主页'页面,当我在'关于'时刷新'关于'页面。
  3. 如何通过页面存储选定的ddl值?
  4. Layout.cshtml代码的一部分:

        .
        .
        <body>
        <header id="top" class="grid-full-margin">
    
            <strong id="logo" class="grid-304"><a href="/"><img src="/images/logo.png" ></a></strong>
            @Html.ActionLink(@Resources.Resource.BackToIntranet, "Index", "Home", null, new {@class = "link link-home grid-position-left"})
    
            <h1>@Resources.Resource.SiteTitle</h1>
    
            <a href="#" class="link link-help">@Resources.Resource.LayoutHelp</a>
    
            <nav clss="grid-896">
    
                <ul>
                    <li>@Html.ActionLink(Resources.Resource.LayoutMenuItem1, "Index", "Home")</li>
                    <li>@Html.ActionLink(Resources.Resource.LayoutMenuItem2, "Index", "ClimaticStation")</li>
                    <li>@Html.ActionLink(Resources.Resource.LayoutMenuItem3, "Index", "ClimaticPoint")</li>
                    <li>@Html.ActionLink(Resources.Resource.LayoutMenuItem4, "Index", "IcewaterExchanger")</li>
                    <li>@Html.ActionLink(Resources.Resource.LayoutMenuItem5, "Index", "Pipeline")
                        <ul>
                            <li>@Html.ActionLink("Zestawienie", "YearsLength", "Pipeline")</li>
                        </ul>
                    </li>
                </ul>
    
                <div class="mod-select-list tbl-actions">
                    @Html.Partial("~/Views/Shared/Partials/LoginPartial.cshtml")
                </div>
            </nav>
    
    
    
        </header>
        <form action="#">
            @Html.Action("VariantsDdl", "MyBase")
        </form> 
    
        @RenderBody()
        .
        .
    

    MyBaseController.cs

    的一部分
       public class MyBaseController : Controller
    {
       [ChildActionOnly]
        public ActionResult VariantsDdl()
        {
            var dataFromDb = GetDataFromDB(); // it's not importstn right now
            return this.PartialView("~/Views/Shared/Partials/VariantsDdlPartial.cshtml", dataFromDb);
        }
       .
       .
       }
    

    此致 马尔钦

1 个答案:

答案 0 :(得分:4)

好的我已经设法解决了这个问题,我想知道你对我的解决方案的意见。

_Layout.cshtml看起来和第一篇文章一样,所以下面只是这个问题最重要的部分(布局下拉列表)

    <div style="float: right;">
            @Html.Action("VariantsDdl", "MyBase")
    </div>

动作:VariantsDdl在MyBaseController上实现。此操作从会话加载选定的变量id,或者如果它是null,则从web.config加载(在这种情况下,它的项目要求必须在db中至少存在一个变量,并且必须在config中指定其id):

    [ChildActionOnly]
    public ActionResult VariantsDdl()
    {
        long defaultVariantID;
        long.TryParse(System.Configuration.ConfigurationManager.AppSettings["DefaultVariantId"], out defaultVariantID);

        if (System.Web.HttpContext.Current.Session["mySelectedVariant"] != null)
        {
            long.TryParse(System.Web.HttpContext.Current.Session["mySelectedVariant"].ToString(), out defaultVariantID);
        }

        var variants = this.db.warianties.ToList();
        var items = new List<SelectListItem>();
        foreach (var variant in variants)
        {
            var selectedItem = false;
            if(variant.id == defaultVariantID)
            {
                selectedItem = true;
            }

            items.Add(new SelectListItem { Selected = selectedItem, Text = variant.nazwa, Value = variant.id.ToString() });
        }

        return this.PartialView("~/Views/Shared/Partials/VariantsDdlPartial.cshtml", items);
    }

将选定的变体ID存储到会话的部分视图和后期操作:

    @model IEnumerable<SelectListItem>

    <label for="field">Current variant</label>
    @Html.DropDownList("Varaints", Model, new { id = "variantsDdl" })

   <script type="text/javascript">
$(function () {
    $('#variantsDdl').change(function () {
        var val = $('#variantsDdl').val()
        $.ajax({
            type: "POST",
            url: '@Url.Action("ChangeVariant", "MyBase")' + '/' + val,
            success: function (result) {
                location.reload();
            },
            error: function (data) { alert('Error'); }
        });

    });
});

部分查看帖子操作'ChangeVariant',将选定的变体ID保存到会话:

   [HttpPost]
    public ActionResult ChangeVariant(long id = 0)
    {
        System.Web.HttpContext.Current.Session["mySelectedVariant"] = id;

        return null;
    }

这是我的要求的解决方案: 1. DDL布局 2.在DDL'onchange'刷新当前页面 3.通过页面保持选定的DDL值

请评论是否是合适的解决方案,或者我应该采取不同的方式?

此致 马尔钦