2013-06-18 2 views
0

jQueryUI 대화 상자를 사용하여 일치하는 데이터 목록을 표시하고 JSON을 통해 선택한 데이터를 ajax/jquery를 사용하여 원본보기로 반환하려고합니다.MVC3, json 대화 상자의 partialview에서 원래 페이지로 돌아 가기

흐름은보기 (사용자가 텍스트 상자를 완료하고 하이퍼 링크를 클릭 함)> jQuery에서 부분보기 대화 상자> JSon 데이터를 양식으로 되돌립니다.

내 첫 질문은 : -

Q.이 가능할까요 아니면 불가능한 일을하려고?

가 작업해야하는 경우가 여기에 Index.view

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

@Html.TextBox("Postcode") <a href="#" id = "PCSearch">Search</a> 

<div id="mDialog"></div> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     $("#mDialog").dialog({ 
      modal: true, 
      width: 550, 
      height: 250, 
      resizable: true, 
      position: 'center', 
      title: 'Select Correspondent', 
      autoOpen: false, 
      dataType: 'json', 
      //open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }, 
      success: function (data) { 

      } 
     }); 

     $('#PCSearch').click(function (e) { 
      e.preventDefault(); 
      $.ajax({ 
       type: "POST", 
       url: "/Item/Search", 
       dataType: 'html', 
       data: { Postcode: $("#Postcode").val() }, 
       success: function (data) { 
        $("#mDialog").html(data).dialog('open'); 
        console.log("Hello"); 
       } 
      }); 
     }); 
    }); 
</script> 

ItemController의 내 코드

입니다 흐름이 잘 작동

[HttpPost] 
public ActionResult Search(string postcode) 
{ 
    if (postcode == null || postcode == "") 
    { 
     return PartialView("SearchByPostCode", null); 
    } 
    var model = Correspondents.Where(x => x.Postcode.ToLower().Contains(postcode.ToLower())); 
    return PartialView("SearchByPostCode", model); 
} 
[HttpPost] 
public ActionResult ChooseCorrespondent(int CorrespondentID) 
{ 
    return Json(CorrespondentID, "text/html"); 
} 

는 사용자가 입력 텍스트, 항목/검색 PartialView dis입니다 모달 대화 상자에서 재생할 때 ChooseCorrespondent 버튼이 눌려지면 페이지가 호출 페이지로 돌아가는 대신 CorrespondentID가있는 빈 화면으로 리디렉션됩니다.

JSON을 잡아서 인덱스보기를 업데이트하는 여러 가지 예제와 메서드를 시도했지만 실패 (오류)하거나 Json을 빈 페이지로 반환합니다.

Q. 이러한 상황에서 Json 반품을 얻는 가장 좋은 방법은 무엇입니까?

시간을내어 읽어 주셔서 감사합니다.

$(document).ready(function() { 
    $('#PCSearch').click(function (e) { 
     e.preventDefault(); 
     $.ajax({ 
      type: "POST", 
      url: "/Item/Search", 
      dataType: 'html', 
      data: { Postcode: $("#Postcode").val() }, 
      success: function (data) { 
       $("#mDialog").html(data).dialog({ 
        modal: true, 
        width: 550, 
        height: 250, 
        resizable: true, 
        position: 'center', 
        title: 'Select Correspondent', 
        autoOpen: false 
       }).dialog('open'); 
       //How can I trap the Json returned from this dialog open? 
       //Using a bindForm function ? 
      } 
     }); 
    }); 
}); 

내가 함정에 반환 된 JSON을 시도하고 원래 페이지를 업데이트하고 있습니다 :

업데이트

나는에 자바 스크립트를 결합했다.

답변

0

이 조금 복잡있어,하지만 지금은 자바 스크립트가 컨트롤러가

public ActionResult Select(string postcode) 
    { 
     if (postcode == null || postcode == "") 
     { 
      return PartialView(); 
     } 
     var model = db.GetCorrespondentByPartialPostcode(postcode); 
     return PartialView("_Select",model); 
    } 
    [HttpPost] 
    public ActionResult Picked(int CorrespondentID) 
    { 
     Correspondent model = db.GetCorrespondentByID(CorrespondentID); 
     return Json(new { success = true, Correspondent = model, Salutation=model.Salutation.Detail }, JsonRequestBehavior.AllowGet); 
    } 

입니다

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#searchClick").live("click", function (e) { 
       e.preventDefault(); 
       var title = 'Select Correspondent'; 
       var url = '@Url.Action("Select", "Correspondent", new { Postcode = "xx" })'.replace('xx', $("#Postcode").val().replace(" ", "")); 
       $('#dialog').load(url, function() { 
        $(this).dialog({ 
         open: function (event, ui) { $('#submit').blur(); }, 
         title: title, 
         modal: true, 
         width: 700, 
         height: 350, 
         resizable: false 
        }) 
        bindForm(this); 
       }); 
       return false; 
      }); 
      $("#searchClear").live("click", function (e) { 
       resetCorrespondent(); 
      }); 
     }); 
     function bindForm(dialog) { 
      $('form', dialog).submit(function (data) { 
       data.preventDefault(); 
       $('#dialog').dialog('close'); 
       var chosenID = $("input[type=submit][clicked=true]").prev().val(); 
       var url = '@Url.Action("Picked", "Correspondent", new { CorrespondentId = "xx" })'.replace('xx', chosenID); 
       $.post(url, function (response) { 
        if (response.success) { 
         if (typeof response.Correspondent == 'object') { 
          var $inputs = $('#IC input'); 
          $.each(response.Correspondent, function (key, value) { 
           $inputs.filter(function() { 
            return "Item.Correspondent." + key == this.name; 
           }).val(value).attr("disabled", true); 
          }); 
          var text1 = 'Two'; 
          $("select option").filter(function() { 
           return $(this).text() == response.Salutation; 
          }).attr('selected', true).attr("disabled", true); 
          $("#Item_CorrespondentID").val(response.Correspondent.CorrespondentID); 
          $("#searchClick").hide(); 
          $("#searchClear").show(); 
          $("#EnterName").hide(); 
          $("#ShowName").show(); 
         } 
        } 
        else { 
         resetCorrespondent(); 
        } 
       }); 
      }); 
     } 
     function resetCorrespondent() { 
      $('#IC input').each(function (i) { 
       $(this).val(""); 
       $(this).removeAttr("disabled"); 
      }); 
      $("#searchClick").show(); 
      $("#searchClear").hide(); 
      $("#EnterName").show(); 
      $("#ShowName").hide(); 

     } 
</script> 

입니다 그리고 부분보기가

@if (Model == null || Model.Count() == 0) 
{ 
    <div>No matches</div> 
} 
else 
{ 
foreach (var item in Model) 
{ 
    using (Html.BeginForm("Select", "Three", FormMethod.Post)) 
    { 
     <div>@item.DisplayName <span>@item.SingleLineAddress</span> 
     <input type="hidden" id="CorrespondentID" value="@item.CorrespondentID" /> 
     <input type="submit" value="Select" id="submit" /></div> 
    } 
} 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("form input[type=submit]").click(function() { 
      $("input[type=submit]", $(this).parents("form")).removeAttr("clicked"); 
      $(this).attr("clicked", "true"); 
     }); 
    }); 
</script> 
} 
입니다

을하고있다

관련 문제