如何在 .Net MVC 中单击单选按钮更改局部视图并将某些模型状态传递给局部视图？

Question

我正在尝试根据单击单选按钮在名为 'productButtonForm' 的 div 块中显示部分视图。部分视图似乎被调用，但传递的模型具有空成员变量。有人可以帮我弄清楚我哪里出错了吗？以下是我得到的：

型号

public class RetrieveAllModel
{
    public Guid ConversationId { get; set; }
    public List<RetrieveProductsModel> Products { get; set; }
    public RetrieveOffersModel Offers { get; set; }
    public int ProductType { get; set; }

}

查看

@{
    ViewBag.Title = "Easy Order";
    int productCount = 0;
 }

<legend>Offers/Products</legend>
@using (Html.BeginForm("ShowProductItems", "BrowseShopping"))
{

    foreach (var type in Model.Products)
    {
        if (productCount > 0 && productCount % 5 == 0)
        {
            <br/>//break after every 5 products
        }
        @type.Name
        @Html.RadioButtonFor(model => model.ProductType, type.ID, Model);
        <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        productCount = productCount + 1;
    }
    <div class="col-lg-5 col-md-6 col-sm-12" id="productButtonForm">
    </div>
}

控制器

public PartialViewResult ShowProductItems()
{
    return PartialView("RetrieveProducts", new RetrieveAllModel() {Products = new List<RetrieveProductsModel>()});
}

[HttpPost]
public PartialViewResult ShowProductItems(RetrieveAllModel model)
{
    //The passed model only has the ProductType set, every other 
    //member variable is null
    return PartialView("RetrieveProducts", model);
}

脚本文件

$(function() {
$("[name=ProductType]").on('change',
    function() {
        var $radio = $(this);
        var myurl = "ShowProductItems?ProductType=" + $radio.val();
        console.log("We hit the script");
        $.ajax({
            url: myurl,
            type: 'POST',
            success: function(data) {
                $("#productButtonForm").append(data);
            }
        });
    });
});

Answer 1

我遇到了一些问题。除了上面提到的 Stephen 之外，我有两个数据模型需要在同一个按钮组中表示。为了解决这个问题，我不得不使用 Html.RadioButton 而不是 RadionButtonFor。此外，我需要访问控制器与客户端建立的对话，以访问当前视图的模型状态。一旦我将它们放置到位，部分视图就会根据需要进行更改。以下是我为解决触发问题所做的更改。

型号

public class RetrieveAllModel
{
    public Guid ConversationId { get; set; }
    public List<RetrieveProductsModel> Products { get; set; }
    public RetrieveOffersModel Offers { get; set; }
    public string ProductType { get; set; }

}

public class RetrieveCatalogModel
{
    public List<BrowseDataItemModel> AvailableBrowseItems { get; set; }
}

public class RetrieveOffersModel : RetrieveCatalogModel
{
    public List<int> SelectedServiceIds { get; set; }
}

public class RetrieveProductsModel : RetrieveCatalogModel
{
    public int ID { get; set; }
    public string Name { get; set; }
    public int Count { get; set; }
}

查看

@model OrderServiceClient.Models.RetrieveAllModel

@{
    ViewBag.Title = "Easy Order";
    int productCount = 1;
    string offers = "Offers";
}

@using (Html.BeginForm("ShowCatalog", "BrowseShopping"))
{
    //since offers are not part of the dynamic product list, they need to be specifically identified
    @offers<label>&nbsp;</label>
    @Html.RadioButton("catalogName", "Offers", true, new { catalogName = "Offers", conversationid = Model.ConversationId })
    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
    foreach (var type in Model.Products)
    {
        if (productCount > 0 && productCount % 5 == 0)
        {
            <br/>//break after every 5 products
        }
        @type.Name<label>&nbsp;</label>
        @Html.RadioButton("catalogName", type.Name, new { catalogName = type.Name, conversationid = Model.ConversationId })
        <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        productCount = productCount + 1;
    }
}

...

<div class="row">
        @{Html.RenderPartial("RetrieveCatalogs", Model.Offers.AvailableBrowseItems);}
</div>

局部视图

@model List<OrderServiceClient.Models.BrowseDataItemModel>

@if (Model != null)
{
    <div class="col-lg-7 col-md-6 col-sm-12 offers-container" id="shoppingcatalog">
        <table class="table table-striped">
            <tr>
                <th>Data Type</th>
                <th>Name</th>
                <th>Price</th>
                <th></th>
            </tr>
            @foreach (var item in Model)
            {
                <tr class="offerList">
                    <td>@item.DataType</td>
                    <td>@item.Name</td>
                    <td>@string.Format($"{item.Amount,0:C2}")</td>
                    <td><a class="addService" dataType="@item.DataType" serviceId="@item.ServiceId" serviceName="@item.Name" amount="@item.Amount">Add</a></td>
                </tr>
            }
        </table>
    </div>
}

控制器

    public PartialViewResult ShowCatalog()
    {
        RetrieveCatalogModel rcm = new RetrieveCatalogModel();
        rcm.AvailableBrowseItems = new List<BrowseDataItemModel>();
        return PartialView("RetrieveCatalogs", rcm.AvailableBrowseItems);
    }

    [HttpPost]
    public PartialViewResult ShowCatalog(string catalogName, Guid conversationid)
    {
        if (catalogName.Equals("Offers"))
        {
            RetrieveOffersModel offers = new RetrieveOffersModel();
            var response = BrowseShoppingHelper.RetrieveOffers(conversationid, _client);
            offers.AvailableBrowseItems = BuildOffersBrowseDataItemsModel(response).ToList();

            return PartialView("RetrieveCatalogs", offers.AvailableBrowseItems);
        }
        else
        {
            var prodctFolderResponse = BrowseShoppingHelper.RetrieveProductFolders(conversationid, _client);
            var output = (RetrieveProductFoldersCommandOutput) prodctFolderResponse.Body.Output;
            RetrieveProductsModel rpm = new RetrieveProductsModel{Name = catalogName, AvailableBrowseItems = new List<BrowseDataItemModel>()};
            foreach (var folder in output.Folders)
            {
                if (!catalogName.Equals(folder.Name)) continue;
                var items = BuildProductBrowseItemsModel(
                    (RetrieveProductsInGroupCommandOutput) BrowseShoppingHelper
                        .RetrieveProductItems(conversationid, _client, folder).Body.Output);
                rpm.AvailableBrowseItems.AddRange(items);
                break;
            }
            return PartialView("RetrieveCatalogs", rpm.AvailableBrowseItems);
        }
    }

脚本文件

$(function() {
$("[name=catalogName]").on('change',
    function () {
        var $radio = $(this);
        var myurl = "ShowCatalog?catalogName=" + $radio.val() + "&conversationid=" + $(this).attr('conversationid');
        console.log("Catalog item is: " + $radio.val() + " and id is: " + $(this).attr('conversationid'));
        $.ajax({
            url: myurl,
            type: 'POST',
            success: function (data) {
                $("#shoppingcatalog").html(data);
            }
        });
    });
});

如何在 .Net MVC 中单击单选按钮更改局部视图并将某些模型状态传递给局部视图？

How do I change a partial view with a radio button click in .Net MVC and have some of the model state passed along to the partial view?

asp.net-mvc

partial-views

radio-button