MVC3 - Razor - 在视图或DropDown列表之间传输数据

时间:2011-07-13 05:29:42

标签: c# asp.net-mvc-3 drop-down-menu razor knockout.js

我想让用户通过下拉列表或Venue Map选择一个座位区[现在就说下拉列表] 用户选择座位区域并点击提交按钮后,我想加载另一个视图,其中包含所选座位区域的表格。

这是数据模型的一部分。用于座位区和表[表格]的EDMX(只是为了向您展示关系的设置。)

EDMX Model

我尝试过MVC3期货序列化 - 无法让它以我想要的方式工作

我在他们的网站上看到这个例子之后我调查了KnockoutJS:http://knockoutjs.com/examples/cartEditor.html以及如何在旁边的下拉列表中选择产品更改的类别。 (这种方法现在可以使用了)但是无法从示例中弄清楚它是如何拉动数据的。

最终,我希望有2个视图(或者只隐藏座位区域并显示表格选择的一个视图)

Razor View - 用户将点击[分配表格]进入第一个视图(查看#1)

Click Assign Table

查看#1:选择座位区 [控制器代码]

public ActionResult AddTableTo(int id)
        {
            var tableService = id;
            var tableServiceName = db.VipServices.Single(x => x.VipServiceId == id);
            var venueId = tableServiceName.Event.Venue.VenueId;
            ViewData["TablerServiceNameFor"] = tableServiceName.Customer.FullName;
            ViewData["TableServiceFor"] = tableService;

            ViewBag.SeatingAreaId = new SelectList(db.SeatingAreas.Where(y => y.VenueId == venueId), "SeatingAreaId", "AreaName");

            return View();
        }

通过下拉列表生成此剃须刀视图:

View1 with drop-down

我最终会把它作为展示不同楼层和休息区的地图。

在他们选择座位区域后...我想重定向到保留上一个视图中的数据(SeatingAreaID)的其他视图,或者隐藏座位区域选择并显示该座位区域中的表格。

[视图#2的部分控制器代码]

ViewBag.TableId = new SelectList(db.Tables.Where(y => y.SeatingAreaId == seatingAreaId), "TableId", "TableName");

请让我知道最好的方法是什么。我相信我会使用这个而不仅仅是这一次。知道该怎么做可能非常有价值。

这可能是一件非常容易的事情,但我无法找到任何关于如何按照我想要的方式做到这一点的事情。并且SeatingAreaID不是我想要在视图之间传输的唯一变量,我需要保留VenueID& VipServiceID同时传输,在选择表的最后,Controller将在表和VipService之间创建多对多关系,并重定向回VipService Details Page。

感谢您的时间和帮助。 添

2 个答案:

答案 0 :(得分:1)

我继续前进,只是我知道的唯一方式,可能不是最好的方式,但它确实有效。如果有人有更好的方法来实现这一点,请告诉我。

我做了什么:

用户选择添加表按钮后。

[控制器1a]

public ActionResult AddTableTo(Int64 id)
        {
            var tableService = id;
            var tableServiceName = db.VipServices.Single(x => x.VipServiceId == id);
            var venueId = tableServiceName.Event.Venue.VenueId;
            ViewData["TablerServiceNameFor"] = tableServiceName.Customer.FullName;
            ViewData["TableServiceFor"] = tableService;

            ViewBag.SeatingAreaId = new SelectList(db.SeatingAreas.Where(y => y.VenueId == venueId), "SeatingAreaId", "AreaName");

            return View();
        }

[查看#1]

@model ShadowVenue.ViewModels.VipSeatingAreaViewModel
@{
    ViewBag.Title = "Select Seating Area";
}

<h2>Select Seating Area For:</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    <fieldset>
        <legend>@ViewData.Eval("TablerServiceNameFor")'s Table(s)</legend>

        <div class="editor-label">
            Select Seating Area
        </div>
        <div class="editor-field">
            @Html.DropDownList("SeatingAreaId", String.Empty)
        </div>
        @Html.Hidden("VipServiceId", ViewData.Eval("TableServiceFor"))
        <p>
            <input type="submit" name="nextButton" value="Next" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to Table Service Details", "Details", new { Id = ViewData.Eval("TableServiceFor") })
</div>

[控制器1b]

[HttpPost]
[Authorize(Roles = "Administrator, SuperUser")]
public ActionResult AddTableTo(VipSeatingAreaViewModel seatingArea, string nextButton)
{
    if (nextButton != null)
        return RedirectToAction("AddTableToTable", new { sid = seatingArea.SeatingAreaId, vid = seatingArea.VipServiceId });
    return View(seatingArea);
}

Controller 1b重定向到Action AddTableToTable [Controller 2]并沿选定的SeatingAreaId和VipServiceId发送

[控制器2]

public ActionResult AddTableToTable(Int16 sid, Int64 vid)
        {
            var tableService = vid;
            var tableServiceName = db.VipServices.Single(x => x.VipServiceId == vid);
            var seatingAreaId = sid;
            var seatingArea = db.SeatingAreas.Single(x => x.SeatingAreaId == sid);

            ViewData["TablerServiceNameFor"] = tableServiceName.Customer.FullName;
            ViewData["TableServiceFor"] = tableService;
            ViewData["SeatingAreaName"] = seatingArea.AreaName;

            ViewBag.TableId = new SelectList(db.Tables.Where(y => y.SeatingAreaId == seatingAreaId), "TableId", "TableName");

            return View();
        }

渲染视图#2 [查看#2]

@model ShadowVenue.ViewModels.VipTableViewModel
@{
    ViewBag.Title = "Select Table";
}

<h2>Select Table For:</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    <fieldset>
        <legend>@ViewData.Eval("TablerServiceNameFor")'s VIP Service</legend>

        <div class="editor-label">
            Select Table in the <b>@ViewData.Eval("SeatingAreaName")</b>  Seating Area
        </div>
        <div class="editor-field">
            @Html.DropDownList("TableId", String.Empty)
        </div>
        @Html.Hidden("VipServiceId", ViewData.Eval("TableServiceFor"))
        <p>
            <input type="submit" name="backButton" value="Back" />
            <input type="submit" name="nextButton" value="Next" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to Table Service Details", "Details", new { Id = ViewData.Eval("TableServiceFor") })
</div>

我给用户选择返回以选择不同的座位区域或选择要添加到VIP服务的表格。在他们选择视图帖子到[controller 2b]之后,它为VipService和Table添加了“多对多”关系。

[controller 2b]

[HttpPost]
        [Authorize(Roles = "Administrator, SuperUser")]
        public ActionResult AddTableToTable(VipTableViewModel model, string backButton)
        {
            if (backButton != null)
            {
                return RedirectToAction("AddTableTo", new { id = model.VipServiceId });
            }

            if (ModelState.IsValid)
            {
                VipService v = db.VipServices.Single(x => x.VipServiceId == model.VipServiceId);
                Table t = db.Tables.Single(x => x.TableId == model.TableId);
                v.Tables.Add(t);

                db.SaveChanges();
                return RedirectToAction("Details", new { id = model.VipServiceId });
            }

            else
            {
                return View(model);
            }

        }

最终我将把DropDown列表变成Venue的视觉效果,这样用户就可以触摸(点击)他们想要分配的区域和表格。

再一次,如果有人有更好的解决方案,请告诉我。

谢谢。

答案 1 :(得分:0)

首先,我强烈建议您停止使用ViewData字典属性将数据从控制器传递到视图。任何时候您都可以使用ViewData,您也可以使用ViewModel。使用ViewModel,您可以让编译器帮助您,而不仅仅是将键传递到字典中。

可以在此处找到一个好的阅读:http://stephenwalther.com/blog/archive/2009/04/13/asp.net-mvc-tip-50-ndash-create-view-models.aspx

使用ViewModel模式后,您应该可以轻松地将数据从视图移动到视图。