JSON 데이터를 반환 한 후 뷰에 텍스트를 표시하는 방법

Question

과 jQuery의 최신 버전을 사용하고 있습니다.

나는 지점 번호를 입력하는 데 사용되는 텍스트 상자가 있습니다. 이 텍스트 상자에 분기 번호를 입력하고 포커스를 잃은 다음 분기 이름을 검색하기 위해 AJAX 호출을 수행해야합니다. 그런 다음 뷰에이 분기 이름을 표시해야합니다.보기 전용이며 편집하지 말아야합니다.

분기 이름에 대한 텍스트 상자 및 "텍스트"에 대한 나의 HTML 마크 업 :

<td class="edit-label">Branch Number: <span class="required">*</span></td> 
<td> 
    @Html.TextBoxFor(x => x.BranchNumber, new { maxlength = "6" }) 
    @Html.Display("BranchName", new { id = "BranchName" }) 
</td> 

내 jQuery 코드 :의 이름을 다시 가져올 수있는 서비스를 호출

$('#BranchNumber').blur(function() { 
    var url = '@Url.Action("GetBranchName")'; 
    var data = { branchNumber: $('#BranchNumber').val() }; 

    $.getJSON(url, data, function (data) { 
     $('#BranchName').text(data); // Need to have an element to populate the data 
    }); 
}); 

내 액션 메소드 분기 :

public ActionResult GetBranchName(long branchNumber) 
{ 
    Check.Argument.IsNotNegative(branchNumber, "branchNumber"); 

    string branchName = myService.GetBranchName(branchNumber); 

    return Json(branchName, JsonRequestBehavior.AllowGet); 
} 

내보기 모델 :

public class MyViewModel 
{ 
    public long BranchNumber { get; set; } 

    public long BranchName { get; set; } 
} 

지점 이름을 반환하면보기에 표시해야합니다. 그것을 표시하는 가장 좋은 방법은 무엇인지 모르겠습니다. 나는 LabelFor 및 DisplayFor를 시도했지만 표시하지 않습니다. 따라서 분기 이름이 반환되면 컨트롤을 찾을 수 없으므로 표시되지 않습니다. 텍스트 상자는 정상적으로 작동하지만 사용자가 분기 이름을 변경할 수 없도록하고 싶습니다.

가장 적합한 해결책은 무엇입니까? 그냥 span 엘리먼트를 가지고 여기에 브랜치 이름을 표시해야할까요?

Answer 1

html 요소의 강력한 형식보기를 사용할 수 있으며 여전히 모델 바인더가 작업을 수행 할 수 있습니다.

// your view 
// using div as an example 
<div id="@("Branch"+Model.BranchName)">@Model.BranchName</div> 
// 
// in your js do this 
$.getJSON(url, data, function (data) { 
    $('#Branch'+@Model.BranchName).text(data); 
});