发送器接收器与Razor MVC3

时间:2011-11-24 13:00:27

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

我想构建一个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);
    }
}

1 个答案:

答案 0 :(得分:2)

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

索引视图:

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

Sender PartialView:

@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>
}

Receiver PartialView:

@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) { ... }
}