我正在尝试编写一个ASP.NET MVC应用程序,该应用程序将一个人的关系与家庭其他成员联系起来。
我正在尝试实现以下屏幕:
每个成员都是通过引导选项卡实现的,到目前为止,我已经能够基于动态生成的ID在各个选项卡之间导航。
查看标记:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
@using HouseHolderInfoSystem.Entity.Models
<script type="text/javascript">
$(function() {
// Navigation click handler
$(".relation_link").click(function(event) {
//Get the ID
const memberId = $(this).attr("data-memberId");
// AJAX call to get the partial view content
$.ajax({
url: '@Url.RouteUrl(routeName: "DisplayRelationTagger")',
type: 'POST',
dataType: 'HTML',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({
MemberId: memberId,
ApplicationId: '@ViewBag.ApplicationId'
}),
success: function(data) {
//populate the tab content.
$(`#${memberId}`).html(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error('Could not update the div because of some error!');
}
});
});
});
</script>
<br />
<div class="container">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Household Relationships</h2>
<br>
<h4>
Please tell us how the members of your household are related to each other
</h4>
<hr>
<br>
@if (ViewBag.FamilyMembers != null)
{
<ul class="nav nav-tabs">
@for (int i = 0, familyMembersCount = (ViewBag.FamilyMembers as List<FamilyMember>).Count; i < familyMembersCount; i++)
{
if (i == 0)
{
<li class="active">
<a data-toggle="tab" class="relation_link" data-memberId="@Html.Raw(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).FamilyMemberId))" href="#@Html.Raw(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).FamilyMemberId))"> @Html.Raw(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).FirstName)) @Html.Raw(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).LastName)) </a>
</li>
}
else
{
<li>
<a data-toggle="tab" class="relation_link" data-memberId="@Html.Raw(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).FamilyMemberId))" href="#@Html.Raw(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).FamilyMemberId))"> @Html.Raw(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).FirstName)) @Html.Raw(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).LastName)) </a>
</li>
}
}
</ul>
<div class="tab-content">
@for (int i = 0, familyMembersCount = (ViewBag.FamilyMembers as List<FamilyMember>).Count; i < familyMembersCount; i++)
{
if (i == 0)
{
<div id="@Html.Raw(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).FamilyMemberId))" class="tab-pane fade in active">
@(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).FirstName)) @Html.Raw(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).LastName))
</div>
}
else
{
<div id="@Html.Raw(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).FamilyMemberId))" class="tab-pane fade">
@(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).FirstName)) @Html.Raw(Html.AttributeEncode((ViewBag.FamilyMembers[i] as FamilyMember).LastName))
</div>
}
}
</div>
}
<br>
</div>
</div>
<div class="row">
<div class="col-lg-4">
@Html.RouteLink("Back", "", null, new { @class = "btn btn-lg btn-danger" })
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4">
@Html.RouteLink("Save and submit", "", null, new { @class = "btn btn-lg btn-primary" })
</div>
</div>
</div>
部分查看代码:
@using HouseHolderInfoSystem.Entity.Models
<script>
function ChangeRelationSelection(CurrentMemberId, RelatedFamilyMemberId, Relation ) {
if ( !CurrentMemberId || !RelatedFamilyMemberId || !Relation )
{
alert( `Current member ID or Related member ID or Relation cannot be empty!` );
return;
}
const url = `@Url.RouteUrl(routeName: "UpdateRelationTagging")`;
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'Access-Control-Allow-Origin': '*'
},
body: JSON.stringify( { FamilyMemberId: CurrentMemberId, RelatedFamilyMemberId: RelatedFamilyMemberId, Relation: Relation } ),
};
fetch( url, options )
.then(res => res.json())
.then( data => console.log(data.message))
.catch(error => console.error( error.message ));
}
</script>
@if (ViewBag.CurrentMember != null && ViewBag.RemainingMembers != null)
{
<br>
<fieldset>
<legend>Relationships of @Html.Raw(Html.AttributeEncode((ViewBag.CurrentMember as FamilyMember).FirstName)) @Html.Raw(Html.AttributeEncode((ViewBag.CurrentMember as FamilyMember).LastName))</legend>
@foreach (FamilyMember familyMember in (List<FamilyMember>)ViewBag.RemainingMembers)
{
<div style="display:block" class="form-group">
<span style="color:red; font-size:16px;">* </span>
<span>
Relationship to @(Html.AttributeEncode((familyMember as FamilyMember).FirstName)) @Html.Raw(Html.AttributeEncode((familyMember as FamilyMember).LastName))
</span>
<select id='@(Html.AttributeEncode(familyMember.FamilyMemberId))' class="form-control relationSelect" onchange="ChangeRelationSelection('@(Html.AttributeEncode(ViewBag.CurrentMemberId))', '@(Html.AttributeEncode(familyMember.FamilyMemberId))', event.currentTarget.value)">
<option selected disabled>----Please select a relation----</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Son">Son</option>
<option value="Daughter">Daughter</option>
<option value="Husband">Husband</option>
<option value="Wife">Wife</option>
</select>
</div>
<br>
}
</fieldset>
}
C#控制器代码:
[Route("tag-relations/{ApplicationId:guid}", Name = "TagRelationGet")]
public ActionResult TagRelations(string ApplicationId)
{
Application currentApplication = _applicationService.GetApplicationById(ApplicationId);
ViewBag.FamilyMembers = currentApplication.FamilyMembersApplication.ToList();
ViewBag.ApplicationId = ApplicationId;
return View();
}
[HttpPost]
[Route("~/display-relations", Name = "DisplayRelationTagger")]
public PartialViewResult DisplayRelationTagging(RelationTaggingDTO TaggingDTO)
{
Application currentApplication = _applicationService.GetApplicationById(TaggingDTO.ApplicationId);
FamilyMember currentlySelectedFamilyMember = currentApplication.FamilyMembersApplication.FirstOrDefault(x => x.FamilyMemberId == TaggingDTO.FamilyMemberId);
List<FamilyMember> remainingFamilyMembers = currentApplication.FamilyMembersApplication.Where(x => x.FamilyMemberId != TaggingDTO.FamilyMemberId).ToList();
// Store family member member count into session for later use
Session["FamilyMemberCount"] = currentApplication.FamilyMembersApplication.ToList().Count;
ViewBag.CurrentApplicationId = TaggingDTO.ApplicationId;
ViewBag.CurrentMemberId = TaggingDTO.FamilyMemberId;
ViewBag.CurrentMember = currentlySelectedFamilyMember;
ViewBag.RemainingMembers = remainingFamilyMembers;
if (Session["RelationTagging"] != null)
{
List<UpdateRelationTaggingDTO> allRelations = JsonConvert.DeserializeObject<List<UpdateRelationTaggingDTO>>(Session["RelationTagging"].ToString());
List<UpdateRelationTaggingDTO> currentlySelectedRelations = new List<UpdateRelationTaggingDTO>();
foreach (var item in allRelations)
foreach (var innerItem in remainingFamilyMembers)
if (item.RelatedFamilyMemberId == innerItem.FamilyMemberId)
currentlySelectedRelations.Add(item);
if (currentlySelectedRelations.Count > 0)
ViewBag.TaggedRelationMembers = JsonConvert.SerializeObject(currentlySelectedRelations);
}
return PartialView("DisplayRelationshipTagger");
}
我知道我必须局部查看选项卡内容并使用ajax进行调用,但是我的问题有两个。
答案 0 :(得分:4)
您可以在代码中执行的操作是在主页中使用jQuery
如果这是您当前的Select语句
<select id='@(Html.AttributeEncode(familyMember.FamilyMemberId))' class="form-control relationSelect" onchange="ChangeRelationSelection('@(Html.AttributeEncode(ViewBag.CurrentMemberId))', '@(Html.AttributeEncode(familyMember.FamilyMemberId))', event.currentTarget.value)">
<option selected disabled>----Please select a relation----</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Son">Son</option>
<option value="Daughter">Daughter</option>
<option value="Husband">Husband</option>
<option value="Wife">Wife</option>
</select>
您可以在
之类的“数据”属性中添加更多属性<select id='@(Html.AttributeEncode(familyMember.FamilyMemberId))' **data-familyid="@(Html.AttributeEncode(familyMember.FamilyMemberId))"
data-memberid="@(Html.AttributeEncode(ViewBag.CurrentMember.Id))"**
class="form-control relationSelect" onchange="ChangeRelationSelection('@(Html.AttributeEncode(ViewBag.CurrentMemberId))', '@(Html.AttributeEncode(familyMember.FamilyMemberId))', event.currentTarget.value)">
<option selected disabled>----Please select a relation----</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Son">Son</option>
<option value="Daughter">Daughter</option>
<option value="Husband">Husband</option>
<option value="Wife">Wife</option>
</select>
一旦两个ID都可用(即下拉菜单中的CurrentMemberID和FamilyMemberID)
接下来您可以做的是
$(".relationSelect").change(function(){
//Here what you can do is read the data attributes
var familyid = $(this).data("familyid");
var MemberId = $(this).data("memberid");
var relation = $(this).val();
// Next step is to send it via tha ajax to server and store it in the session, as you require
$.post("@Url.Action("StoreInSession", "Controller")", {MemberID: MemberId, familyID :familyid, relation : relation}, function(resp){
});
在Controller的下一部分中,您可以拥有一个可以以这种格式存储数据的模型
public class RelationStore
{
public string MemberID {get;set;}
public Dictionary<string,string> RelationAndFamily {get;set;}
}
和在控制器中
public JsonResult(string FamilyId, string memberId, string Relation )
{
List<RelationStore> I = Session("RelationStore") as List<RelationStore>;
//Make your Logic to Add to the List and then put the list back in session
}