나는 codefirst 접근 방식을 사용하여 mvc5 응용 프로그램을 개발하고 있습니다. 이런 식으로 json 객체를 뷰에 반환합니다.
public JsonResult FillItem(int mnId, int sbId)
{
var db = new KnittingdbContext();
var x1 = db.ItemTemplates.Where(a => a.MainGroupId == mnId).Where(a => a.SubGruopId == sbId).FirstOrDefault().Atribute1;
var x2 = db.ItemTemplates.Where(a => a.MainGroupId == mnId).Where(a => a.SubGruopId == sbId).FirstOrDefault().Atribute2;
var x3 = db.ItemTemplates.Where(a => a.MainGroupId == mnId).Where(a => a.SubGruopId == sbId).FirstOrDefault().Atribute3;
var y1 = db.AtributeDetails.Where(a => a.AtributeId == x1).Select(a => new
{
AtributeDetailId=a.AtributeDetailId,
AtributeDetail=a.AtDetailVal,
AtributeName=a.Atribute.AtributeName,
AtributeType=a.Atribute.AtributeType
});
var y2 = db.AtributeDetails.Where(a => a.AtributeId == x2).Select(a => new
{
AtributeDetailId = a.AtributeDetailId,
AtributeDetail = a.AtDetailVal,
AtributeName = a.Atribute.AtributeName,
AtributeType = a.Atribute.AtributeType
});
var y3 = db.AtributeDetails.Where(a => a.AtributeId == x3).Select(a => new
{
AtributeDetailId = a.AtributeDetailId,
AtributeDetail = a.AtDetailVal,
AtributeName = a.Atribute.AtributeName,
AtributeType = a.Atribute.AtributeType
});
var ad = new[] { y1,y2,y3};
return Json(ad, JsonRequestBehavior.AllowGet);
}
여기에 2 개의 테이블이 있습니다 (제 질문에 대해). Atribute 및 AtributeDetail 테이블 사이에 일대 다 관계가 있습니다.
retuned jason 객체를 기반으로 내 뷰에서 드롭 다운 목록과 텍스트 상자를 동적으로 생성하고 싶습니다.
여기서 'AtributeDetailId'와 'AtributeDetail'은 동적으로 생성되는 드롭 다운 목록의 Value 및 Text 요소입니다.
AtributeType의 경우 데이터베이스에는 '텍스트'와 '선택'의 두 가지 값이 있습니다.
보기에서 jquery를 사용하여 jason 개체 (ad)를 반복하고 각 개체 (jason 개체의 개체) 'AtributeType'을 확인한 후 '텍스트'이면 텍스트 상자 (입력)를 생성하거나 드롭 다운 목록을 생성하고 싶습니다. 생성 된 텍스트 상자 또는 드롭 다운 목록 앞에 특정 'AtributeName'을 기반으로 레이블을 표시하고 싶습니다. 여기에는 3 개의 개체 만 표시되었습니다. 그러나 실제로는 다양합니다.
이에 대한 올바른 jquery를 개발하기 위해 고군분투하고 있습니다. 아래는 지금까지 개발 한 jquery를 보여줍니다. 그러나 그것은 완전하지 않습니다.
$('#SubGrpId').change(function () {
$.ajax({
url: '@Url.Action("FillItem", "Item")', // dont hard code your url's
type: "GET",
dataType: "JSON",
data: { MnId: $('#MainGrpId').val(), SbId: $(this).val() }, // pass the selected value
success: function (ad) {
alert("Im In");
var s = $('<select/>');
$.each(ad, function (l, u){
$.each(u, function (i, itemdt) {
$('<option />', { value: itemdt.AtributeDetailId, text: itemdt.AtributeDetail }).appendTo(s);
})
s.appendTo('#ss');
})
},
error:function(){
alert("something wrong");
}
});
})
성공 기능에 관한 것입니다. 그러나 그것은 나에게 하나의 ddl 만 제공하고 모든 Atribute Detail이 그것에 바인딩됩니다. 누구든지 조건 ( 'Text'또는 'Select')을 확인하여 올바른 jquery를 개발하고 AtributeName이 포함 된 적절한 텍스트 상자와 ddl을 생성하도록 도와 줄 수 있습니까?
이것은 ddls의 선택된 값과 텍스트 상자에 입력 된 값을 서버에 다시 게시 할 수있는 방식이어야합니다.
보기의 본문으로 ID가 'ss'인 div가 있습니다. 생성 된 모든 텍스트 상자와 ddl을 해당 div에 자식 div로 추가하고 싶습니다.
<div id="ss" class="col-md-6">
</div>
내 질문을 분명하게 제시했으면 좋겠습니다. 모든 도움이 감사합니다. 미리 감사드립니다!
y1의 AtributeType이 'Text'라고 가정 해 보겠습니다. 그러면 y1에는 항목이 없습니다 (y1은 비어 있음). 즉, 객체의 'AtributeDetailId'및 'AtributeDetail'은 사용되지 않습니다. y1의 'AtributeName'이 "atribute1"이라고 가정하고 "atribute1"을 표시하는 레이블이있는 텍스트 상자를 생성하고 싶습니다.
y2의 'AtributeType'이 'Select'라고 가정합니다. 그런 다음 y2에는 항목이 있습니다. 여기서 'AtributeDetailId'와 'AtributeDetail'이 중요합니다. y2 목록이 5 개의 요소로 구성되어 있다고 가정 해 보겠습니다. "aa", "bb", "cc", "dd", "ee"및 y2의 'AtributeName'이 "atribute2"이면 앞쪽에 "atribute2"를 표시하는 레이블이있는 5 개 요소를 포함하는 ddl을 생성해야합니다.
y3의 'AtributeType'도 'Select'라고 가정 해 보겠습니다. 그래서 거기에 항목이 있고 그것은 또한 ddl입니다.
이제 1 개의 텍스트 상자와 2 개의 ddl이 id "ss"로 div 내에 동적으로 생성되었습니다.
텍스트 상자에 사용되는 값의 예는 다음과 같습니다.
y1 = [
{ AtributeDetailId=null, AtributeDetail=null, AtributeName="atribute1", AtributeType="Text" }
]
드롭 다운 목록에 사용되는 값의 예는 다음과 같습니다.
y2 = [
{ AtributeDetailId=1, AtributeDetail="aa", AtributeName="atribute2", AtributeType="select" },
{ AtributeDetailId=2, AtributeDetail="bb", AtributeName="atribute2", AtributeType="select" },
{AtributeDetailId=3, AtributeDetail="cc", AtributeName="atribute2", AtributeType="select" }
]
데이터 구조에 따라 스크립트는
var ss = $('#ss');
$('#SubGrpId').change(function () {
$.ajax({
....
success: function (ad) {
$.each(ad, function(l, u) {
// add the label
var name = u[0].AtributeName;
var label = $('<label></label>').text(name).attr('for', name);
s.append(label);
if (u[0].AtributeType === 'Text') {
// There is only one item and its for generating a textbox
var input = $('<input>').attr({ type: 'text', id: name, name: name });
ss.append(input);
} else {
// Its a select
var select = $('<select></select>').attr({ id: name, name: name });
// add each option
$.each(u, function (i, itemdt) {
select.append($('<option></option>').val(itemdt.AtributeDetailId).text(itemdt.AtributeDetail));
})
ss.append(select);
}
});
}
});
});
참고 : 변수 x2및 x3. 대신 사용
var x = db.ItemTemplates.Where(a => a.MainGroupId == mnId).Where(a => a.SubGruopId == sbId).FirstOrDefault();
그리고
var y1 = db.AtributeDetails.Where(a => a.AtributeId == x.Atribute1).Select(a => new
var y2 = db.AtributeDetails.Where(a => a.AtributeId == x.Atribute2).Select(a => new
기타
편집하다
쿼리를 다음과 같이 수정하여보기와 더 직접적으로 관련된 개체를 반환 할 수 있습니다.
var x = db.ItemTemplates.Where(a => a.MainGroupId == mnId).Where(a => a.SubGruopId == sbId).FirstOrDefault();
var ids = new List<int>{ x.Atribute1, x.Atribute2, x.Atribute3 };
var y = db.AtributeDetails.Where(a => aids.Contains(a.AtributeId)).GroupBy(a => a.AtributeName).Select(g => new
{
Name = g.Key,
Options = g.Where(z => z.AtributeDetailId != null).Select(x => new
{
Value = x.AtributeDetailId,
Text = x.AtributeDetail
})
});
return Json(y, JsonRequestBehavior.AllowGet);
스크립트를 다음과 같이 수정하십시오.
success: function (ad) {
$.each(ad, function(l, u) {
// add the label
var name = u.Name;
var label = $('<label></label>').text(name).attr('for', name);
s.append(label);
if (u.Options.Length == 0) {
// There is only one item and its for generating a textbox
var input = $('<input>').attr({ type: 'text', id: name, name: name });
ss.append(input);
} else {
// Its a select
var select = $('<select></select>').attr({ id: name, name: name });
// add each option
$.each(u.Options, function (i, option) {
select.append($('<option></option>').val(option.Value).text(option.Text));
})
ss.append(select);
}
});
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다