我之前曾问过一个关于重复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 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来减少重复的代码
答案 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
}
});
});
此方法允许您获取最少数据(仅限必填字段),并获得部分视图功能