如何发送不同的数据来复制PartialViews?

时间:2016-10-10 01:17:02

标签: jquery asp.net-mvc partial-views

我之前曾问过一个关于重复PartialViews的问题,并将其弄清楚了。然后我开始考虑更多,并开始想知道如何用不同的数据填充重复的PartialViews。我用asp.net-mvc标记了这个问题,因为它是一个MVC项目,我之前被告知我的方式是" anti-mvc",但是,它仍然是一个asp.net-mvc项目,只是减去Razor和我想的好处..

这是情况.. 我有一个视图,上面有两个标签,一个叫做制造商,另一个是经销商,每个标签有两个PartialViews,一个是Address PartialView,另一个是Contact PartialView。如上所述,“制造商”选项卡具有这两个“部分视图”,“经销商”选项卡也是如此。

两个PartialViews如下......

地址

<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);
}

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

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来减少重复的代码

1 个答案:

答案 0 :(得分:0)

这就是我的建议。

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

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

<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);
}

现在更改您的onclick功能

$('.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
        }
    });

});

此方法允许您获取最少数据(仅限必填字段),并获得部分视图功能