带有 Razor MVC3 的发送方-接收方答案

【问题标题】：Sender-Receiver with Razor MVC3带有 Razor MVC3 的发送方-接收方
【发布时间】：2011-11-24 13:00:26
【问题描述】：

我想构建一个 Sender-Receiver，每个都有两个 PartialViews，并通过 Controller 中的 send 方法连接它们。 Ajax Action 调用需要 div 的 Id，必须重新渲染。但我希望发送者与接收者完全分离。

我能否在不使用 AjaxOptions.UpdateTargetId 的情况下重新渲染 PartialView（例如在 Controller 本身中）？

这个想法是允许多个接收者连接到一个发送者（类似于 WebParts 机制）。

索引视图：

@{
    ViewBag.Title = "Test Ground";
    var sender = (MVCPortalViewModel.Models.SenderModel)ViewBag.Model.PortletModels["Sender"];
    var receiver = (MVCPortalViewModel.Models.ReceiverModel)ViewBag.Model.PortletModels["Receiver"];
}
<p>@Html.Partial("SenderPartView", sender)</p>
<p>@Html.Partial("ReceiverPartView", receiver)</p>

发件人视图：

@model MVCPortalViewModel.Models.SenderModel

@using (Ajax.BeginForm("ApplyColor", "Test", new { Color = @Model.Color }, new AjaxOptions { UpdateTargetId = @ViewBag.SenderDivId, HttpMethod = "Post" }))
{
    <div id="senderPartDiv" style="border: 1px solid black;">
        <div style="background-color: @Model.Color">
            <h2>@Model.Title</h2>
        </div>
            <p>Hallo @Html.ViewContext.HttpContext.User.Identity.Name</p>
            <p>
                @Html.Editor("Color")
                <input type="submit" value="Apply Color" />
            </p>
            <p>
                @Ajax.ActionLink("Send Color", "SendColor", new { Color = @Model.Color }, new AjaxOptions { UpdateTargetId = @ViewBag.ReceiverDivId, HttpMethod = "Post" })
            </p>
    </div>
}

接收者视图：

@model MVCPortalViewModel.Models.ReceiverModel

<div id="receiverPartDiv" style="border: 1px solid black;">
    <h2 style="background-color: @Model.Color">@Model.Title</h2> 
    <p>Color: @Model.Color</p>
</div>

控制器：

public class TestController : Controller
{
    public ActionResult Index()
    {
        ViewBag.Model = Model;
        ViewBag.ReceiverDivId = "receiverPartDiv";
        ViewBag.SenderDivId = "senderPartDiv";
        return View();
    }

    public ActionResult SendColor(string Color)
    {
        var receiverModel = ((ReceiverModel)Model.PortletModels["Receiver"]);
        receiverModel.Color = Color;

        ViewBag.ReceiverDivId = "receiverPartDiv";
        ViewBag.SenderDivId = "senderPartDiv";

        return PartialView("ReceiverPartView", receiverModel);
    }
}

【问题讨论】：

我对这个问题想得越多，我就越觉得你应该实现一个 JavaScript 解决方案。回到服务器只是为了更新本地视图是没有意义的，除非你在服务器上有其他职责。
这只是一个抽象的例子，在我需要的发送方-接收方解决方案中，服务器上可能会有更多的职责（例如从服务器加载更多数据）。我也更喜欢服务器版本，因为它是可单元测试的。

标签： c# javascript asp.net-mvc-3 razor

【解决方案1】：

除了客户端 JQuery 方法之外，我还提出了一个解决方案，它使用 RenderAction 和用于接收器的单独控制器。

索引视图：

@model MVCPortalViewModel.Models.SenderModel
<p>@Html.Partial("Sender", Model)</p>
<p>
    @{ Html.RenderAction("Receive1", "Receiver", Model); }
    @{ Html.RenderAction("Receive2", "Receiver", Model); }
</p>

发件人部分视图：

@model MVCPortalViewModel.Models.SenderModel
@using (@Html.BeginForm(new { Color = @Model.Color }))
{
    <h2 style="background-color: @Model.Color;">@Model.Title</h2>
    <p>
        Send Color: 
        @Html.Editor("Color")
        <input type="submit" value="Send Color" id="sendButton" />
    </p>
}

接收方部分视图：

@model MVCPortalViewModel.Models.ReceiverModel
<h2 style="background-color: @Model.Color">@Model.Title</h2>
<p>
    Color: 
    @Html.Display("Color")
</p>

控制器：

public class ChildActionController : Controller
    {
        public ActionResult Index(string Color)
        {
            SenderModel sender = new SenderModel { Title = "Sender", Color = "red" };
            if (!string.IsNullOrEmpty(Color))
            {
                sender.Color = Color;
            }
            return View(sender);
        }
}

用于连接的接收器控制器：

public class ReceiverController : Controller
    {
        public ActionResult Receive1(SenderModel Sender)
        {
            ReceiverModel receiver = new ReceiverModel { Title = "Receiver1" };
            receiver.Color = Sender.Color;
            return PartialView("MessageReceiver", receiver);
        }
        public ActionResult Receive1(SenderModel Sender) { ... }
}

【讨论】：