드롭 다운 목록 변경시 부분보기가 렌더링되지 않음

Question

값을 선택하면 관련 데이터를 렌더링하는 부분보기가 표시되는 드롭 다운 목록이 있습니다. 나는이 일에 익숙하지 않아서 며칠 동안 일해 왔고 일하기가 어려울 것 같습니다. 누구든지 도와주세요.

INDEX

@{ ViewBag.Title = "Voyage Information"; } 

@using (Ajax.BeginForm("Index", "VM", new AjaxOptions { UpdateTargetId = "VMResults" })) 
{ 

<div id="container"> 
    <label for="ddlvm"><strong>Select Vessel</strong></label> 
    @Html.DropDownListFor(m =>m.Vessel_ID,(SelectList)ViewBag.ddl, "-- Select Vessel --", new {@id = 
    "ddlvm"}) 

    <br/><br/> 

    <div id="VMResults"> 

    </div> 
</div> 
} 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#ddlvm").change(function() { 
     var vId = $("#ddlvm").val(); 
      $("#VMResults").load('@(Url.Action("GetVessel","VM",null, Request.Url.Scheme))?vId=' + 
    vId); 
    });  
}); 

CONTROLLER

public ActionResult Index() 
{ 
    ViewBag.ddl = new SelectList(db.X_VesselMaster.OrderBy(x => x.Vessel_Name), "Vessel_ID", "Vessel_Name"); 
    return View(); 
} 


[HttpGet] 
public ActionResult GetVessel(int y) 
{ 
    var viewModel = new VoyageData(); 
    viewModel.VesselMasters = db.X_VesselMaster.Where(i => i.Vessel_ID == (y)).Include(i => 
    i.X_Vessel_Transaction_Header).ToList(); 

    if (y != null) 
    { 
     viewModel.Vessel_Transaction_Headers = viewModel.VesselMasters.Single(i => i.Vessel_ID == 
    (y)).X_Vessel_Transaction_Header.Where(c => c.Deleted <= 0).ToList(); 
    } 
    return PartialView("_Voyages", viewModel); 

} 

부분보기

@model ...... 
<table> 
    <thead> 
    <tr><th>Vessel ID</th></tr> 
     <tr> 
      <th>Arrived</th> 

     </tr> 
    </thead> 

    @foreach (var m in Model.Vessel_Transaction_Headers) 
     { 
      <tr><td>@m.Vessel_ID</td></tr> 

      <tr> 
       <td>@m.Arrived</td> 

       </tr> 
     } 

</table> 

Answer 1

당신은 당신이 CR이 양식을 제출하도록 자바 스크립트를 변경해야 eated. jquery를 사용하여 찾을 수 있습니다 (단 하나만있는 경우 $form=$('form')으로 간단하게 찾을 수 있습니다.) 두 개 이상인 경우 (id가 Ajax.beginForm 인 atrributes 매개 변수에 있음) id를 사용하여 ID를 지정할 수 있습니다. . 당신이이 jQuery를 witgh 선택을 받으면, 단순히 형태의 DOM 객체를 풀다 및 통화이 $form = $('#theFormId')처럼의이 같은 방법을 제출. $fomr[0].submit()

을 이런 일이 발생하면, 눈에 거슬리지 아약스 헬퍼의 데이터를 게시 처리됩니다 양식 및 VMResults ID 내용 업데이트

순수 아약스와 ASP.NET Ajax 도우미 및 방해가되지 않는 도우미와 같은 두 가지 기술을 혼합하는 것이 문제입니다.

간단하게 jQuery ajax를 사용하여 수행하려는 경우 양식이 전혀 필요하지 않습니다. 간단하게 변경 이벤트 처리기에서 다음과 같이 somethign 않습니다

$("#ddlvm").change(function() { 
    var vId = $("#ddlvm").val(); 
    jQuery.get('@(Url.Action("GetVessel","VM",null, Request.Url.Scheme))?vId=' + vId); 
    }).done(function(html) { 
    $('#VMResults').html(html); 
    }); 
}); 

제발, 당신은 아약스 호출 get을 확인한 다음 .done() 기능에서 수행되는 응답, 기다릴 필요가 참고. 브라우저가 서버로부터 응답을 받으면 서버 응답 (응답)을 매개 변수로 전달하여 완료 콜백이 호출됩니다.

몇 마디로, ASP.NET MVC Ajax 헬퍼를 사용하거나 순수 jQuery와 JavaScript ajax를 사용하십시오. 적어도, 당신은 지금 당신이 두 가지 다른 것들을 혼합하고 있다는 것을 알아야합니다.