如何将不同的数据发送到重复的 PartialViews？

Question

我之前问过一个关于重复的 PartialViews 的问题，并把它理顺了。然后我开始更多地考虑它，并开始想知道如何用不同的数据填充重复的 PartialView。我用 asp.net-mvc 标记了这个问题，因为它是一个 MVC 项目，我之前被告知我的方式是“反 mvc”，但它仍然是一个 asp.net-mvc 项目，只是减去了 Razor 和我想的好处..

情况是这样的。。 我有一个视图，上面有两个选项卡，一个称为制造商，另一个是经销商，每个选项卡都有两个 PartialView，一个是 Address PartialView，另一个是 Contact PartialView。如前所述，制造商选项卡有这 2 个部分视图，经销商选项卡也有。

两个PartialView如下...

地址

<script src="~/Scripts/Custom/Common/CommonControlsJS.js"></script>

<div class="form-horizontal">
    <div class="form-group">
        <label for="txtAddress1" class="control-label col-md-2" id="lblAddress1">Line 1</label>
        <div class="col-md-10">
            <input id="txtAddress1" type="text" class="form-control max-size" name="address" placeholder="Line 1" />
        </div>
    </div>
    <div class="form-group">
        <label for="txtAddress2" class="control-label col-md-2" id="lblAddress2">Line 2</label>
        <div class="col-md-10">
            <input id="txtAddress2" type="text" class="form-control max-size" placeholder="Line 2" name="address2" />
        </div>
    </div>
    <div class="form-group">
        <label for="txtCity" class="control-label col-md-2" id="lblCity">City</label>
        <div class="col-md-10">
            <input id="txtCity" type="text" class="form-control max-size" name="city" placeholder="city" />
        </div>
    </div>
    <div class="form-group">
        <label for="txtState" class="control-label col-md-2" id="lblState">State</label>
        <div class="col-md-4">
            <input id="txtState" type="text" class="form-control" name="state" placeholder="state" />
        </div>
        <label for="txtZip" class="control-label col-md-2" id="lblZip">Zip/Postal</label>
        <div class="col-md-4">
            <input id="txtZip" type="text" class="form-control" name="zip" placeholder="Zip/Postal" />
        </div>
    </div>
    <div class="form-group">
        <label for="acCountries" class="control-label col-md-2" id="lblCountry"><b>Country</b></label>
        <div class="col-md-10">
            <select id="acCountries" class="form-control CountryDropdown" name="country"></select>
        </div>
    </div>

</div>

联系方式

<script src="~/Scripts/Custom/Common/CommonControlsJS.js"></script>

<div class="form-horizontal">

    <div class="form-group">
        <label class="control-label col-md-2" for="txtContactType">Contact&nbsp;Type:</label>
        <div class="col-md-9">
            <input class="form-control fixed-form-control" id="ddContactType" name="contacttype" placeholder="ContactType" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="txtContact">Contact:</label>
        <div class="col-md-9">
            <input class="form-control fixed-form-control" id="txtContact" placeholder="Contact" name="contact" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="txtPhone">Home:</label>
        <div class="col-md-9">
            <input class="form-control fixed-form-control" id="txtPhone" placeholder="Home" name="home" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="txtWork">Work:</label>
        <div class="col-md-9">
            <input class="form-control fixed-form-control" id="txtWork" placeholder="Work" name="work" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="txtFax">Fax:</label>
        <div class="col-md-9">
            <input class="form-control fixed-form-control" id="txtFax" placeholder="Fax" name="fax" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="txtMobile">Mobile:</label>
        <div class="col-md-9">
            <input class="form-control fixed-form-control" id="txtMobile" placeholder="Mobile" name="mobile" />
        </div>
    </div>

</div>

我知道我可以在一组 PartialViews 中填充字段，但不知道如何使用重复项中的不同数据填充字段。我还没有开始为它编写代码，因为我正在思考如何做到这一点。有没有人遇到过这个问题？我正在使用 JQuery Ajax 调用控制器并获取返回的数据。没有 Razor 语法。

有没有办法操纵 PartialViews 以便我可以将 PartialViews 与彼此区分开来？如有必要，我可以获取每个选项卡更改的选择事件，但是我正在考虑添加一个自定义数据属性，这是要求能够操作 PartialView 的原因之一。

有什么想法、方向或解决方案吗？

编辑

这是我在使用 PartialViews 之前通常填充字段的方式

我的 AJAX

function GetDealerByID(getTheID) {
    var id = getTheID;
    $.ajax({
        type: "GET",
        url: AddURLParam.GetDealerForUpdateByDealerID + "?id=" + id,
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
            return DealerToUpdate(data);
        }
    })
    $("#btnAddNewDealer").attr('value', "Update");
    $("#btnDeleteNewDealer").show();
    $("#txtAdministrationDealerPassword").attr("disabled", "");
    $("#txtAdministrationDealerConfirmPassword").attr("disabled", "");
    $("#btnResetDealerPassword").show();
}

这调用了我的 JsonResult

public JsonResult GetDealerForUpdate(int id)
    {
        try {
            Admin = new DAL.Admin();

            List<NewDealer> lst = Admin.GetDealerForUpdate(id);

            return Json(lst, JsonRequestBehavior.AllowGet);
        }
        catch (Exception Ex)
        {
            EventLogger.EventSource = this.ToString() + ".GetDealerForUpdate()";
            EventLogger.PostException(Ex, EventLogger.EventSource, HttpContext.Request, HttpContext.Session,
                new Dictionary<string, string> {
                        {Functions.GetName(() => id), id.ToString() }   });
            throw new Exception(Constants.FRIENDLY_ERROR_MESSAGE);
        }
    }

在我从控制器获取返回的数据并且我的 AJAX 调用成功后，它使用返回的数据并使用此函数填充经销商字段

function DealerToUpdate(dealerData) {
    $("#txtAdministrationDealerCompanyName").val(dealerData[0].dealerName);
    $("#txtAdministrationDealerAddress1").val(dealerData[0].address1);
    $("#txtAdministrationDealerAddress2").val(dealerData[0].address2);
    $("#txtAdministrationDealerCity").val(dealerData[0].city);
    $("#txtAdministrationDealerState").val(dealerData[0].state);
    $("#txtAdministrationDealerZip").val(dealerData[0].zip);
    $("#txtAdministrationDealerContact").val(dealerData[0].contactName);
    $("#txtAdministrationDealerEmail").val(dealerData[0].email);
    $("#txtAdministrationDealerPhone").val(dealerData[0].phone);
    $("#txtAdministrationDealerWorkPhone").val(dealerData[0].work);
    $("#txtAdministrationDealerFax").val(dealerData[0].fax);
    $("#txtAdministrationDealerMobile").val(dealerData[0].mobile);
    $("#txtAdministrationDealerPassword").val();
    $("#txtAdministrationDealerOther").val(dealerData[0].other);
    $("#txtAdministrationDealerUserName").val(dealerData[0].dealerLoginUserName);
    var dd = $("#acDealerCountries").data("kendoDropDownList");
    dd.text(dealerData[0].country);

    var stuff = dealerData[0].manufacturerNames;
    var myarray = stuff.split(',');

    $("#msManufacturers").getKendoMultiSelect().value(myarray);
}

这是来自控制器的 JsonResult 使用的我的 NewDealer 模型

public class NewDealer
    {
        public int? dealerContactID { get; set; }
        public int? dealerID { get; set; }
        public string dealerName { get; set; }
        public string address1 { get; set; }
        public string address2 { get; set; }
        public string city { get; set; }
        public string state { get; set; }
        public string zip { get; set; }
        public string country { get; set; }
        public string contactName { get; set; }
        public string email { get; set; }
        public string phone { get; set; }
        public string work { get; set; }
        public string fax { get; set; }
        public string mobile { get; set; }
        public string other { get; set; }
        public string password { get; set; }
        public int? parentID { get; set; }
        public List<string> manufacturerIDs { get; set; }
        public string manufacturerNames { get; set; }
        public string dealerLoginUserName { get; set; }
    }

我现在选择使用 PartialViews 来减少重复代码

Answer 1

这就是我的建议。

您可以在局部视图中使用 Razor。创建两个新的 ViewModel 地址和联系人

在行的制造商和经销商的记录网格中添加数据属性

<tr class="record" data-id="@manufacturerid" data-type="manufacturer"> x x x x x x x </tr>

同样适用于您的经销商记录

<tr class="record" data-id="@dealerid" data-type="dealer"> x x x x x x x </tr>

有一个div来显示表单

<div id='addressDiv' style="display:none"></div>
<div id='contactDiv' style="display:none"></div>

在您的控制器中添加两个获取数据和联系人的新方法：

public ActionResult GetAddress(int id, string type)
{
        //Get Address fields based on id and type
        AddressViewModel model = new AddressViewModel();
        //Populate the model with the data

        return PartialView("_AddressPartial", model);
}
public ActionResult GetContact(int id, string type)
{
        //Get contact fields based on id and type
        ContactViewModel model = new ContactViewModel();
        //Populate the model with the data

        return PartialView("_ContactPartial", model);
}

现在改变你的点击功能

$('.record').click(function(){
    var id = $(this).attr('data-id');
    var type = $(this).attr('data-type);
    $('#addressDiv').empty();
    $('#contactDiv').empty();
    $.ajax({
        type: "GET",
        url:  "http://someurl/Controller/GetAddress",
        datatype: "json",
        data: { id: id, type: type },
        contentType: 'html',
        success: function (result) {
            $('#addressDiv').append(result);
            $('#addressDiv').show();
            // Bind your editing div event functions here
        }
    });
    $.ajax({
        type: "GET",
        url:  "http://someurl/Controller/GetContact",
        datatype: "json",
        data: { id: id, type: type },
        contentType: 'html',
        success: function (result) {
            $('#contactDiv').append(result);
            $('#contactDiv').show();
            // Bind your editing div event functions here
        }
    });

});

此方法将允许您获取最少的数据（仅限必填字段）并获得部分视图功能