ASP.NET과 MVC3 동일한보기에서 양식을 제출 한 후 데이터 결과 표시

Question

현재 MVC3 ASP.NET 응용 프로그램에서 작업 중입니다. 양식에서 간단한 텍스트 상자를 작성한 다음 제출 단추를 누르십시오 .

제출 단추를 클릭하면 컨트롤러는 텍스트 상자의 입력을 사용하고 LINQ to SQL을 사용하여 저장 프로 시저 쿼리에서 SQL 데이터베이스를 호출하고 데이터 테이블을 반환합니다. 현재 제출 버튼은 새로운 뷰 페이지의 테이블에 데이터를 표시합니다. 그러나 페이지를 새로 고치지 않고 제출 버튼 바로 아래에서로드되도록 생성 된 데이터 테이블을 갖도록 수정하려고합니다.

이제 AJAX 또는 Jquery 중 하나를 사용해야한다는 사실을 알고 있습니다. 사용자를 새 페이지로 보내지 않고 데이터를 표시하는 방법을 이해하는 데 어려움을 겪고 있습니다. 보기 페이지에서

형태 :

<% using (Html.BeginForm("RunQuery","RecentActivity")) 
    {%> 

    <fieldset> 
     <legend></legend> 
     <p> 
      <label for="Name">Name:</label> 
      <%= Html.TextBox("Name") %> 
      <%= Html.ValidationMessage("Name", "*") %> 

     </p> 
     <p> <label for="StartDate"> Start Date:</label> 
      <%= Html.TextBox("StartDate")%> 
      <%= Html.ValidationMessage("StartDate", "*") %> 

      <label for="EndDate"> End Date:</label> 
      <%= Html.TextBox("EndDate") %> 
      <%= Html.ValidationMessage("EndDate", "*") %> 
     </p> 

     <p> 
      <input type="submit",id="submit", value="Submit" /> 
     </p> 

     </fieldset> 
<% } %> 

컨트롤러 :

ModelDataContext db = new ModelDataContext(); 
    [HttpPost] 

    public ActionResult RunQuery(string Name,string StartDate, string EndDate) 
    { 

     var results= db.lastndays(Name, StartDate, EndDate); 
     return View(results.ToList()); 
    } 

어떤 도움이 좋은 것입니다, 감사합니다.

Answer 1

당신은 내가 POST에서 페이지 이름을 분할 할 컨트롤러에

[HttpPost] 
    public JsonResult RunQuery(string Name,string StartDate, string EndDate) 
    { 
     var results= db.lastndays(Name, StartDate, EndDate); 
     if(/*there are results*/){ 
     return Json(new{results=results.ToList()}); 
     }else{ 
      return Json(new{results="error"}); 
     } 
    } 

Answer 2

을

$(":submit").click(function(e){ 
e.preventDefault(); //this will prevent the form from submitting 
var $name=$(":input[name='Name']"); 
var $StartDate=$(":input[name='StartDate']"); 
var $EndDate=$(":input[name='EndDate']"); 
//if you are using unobtrusive validation 
if($('form').valid()){ 
$.post("/",{Name:$name,StartDate:$StartDate,EndDate:$EndDate},function(data){ 
    if(data.results!='error') 
     console.log(data.results); 
    },'json'); 
}else alert('form not valid'); 
}); 

을 시도 할 수 있습니다. jquery에서 다루기가 더 쉽도록 양식의 이름을 지정합니다. 그러면 전체 양식을 직렬화 할 수 있으며 각 데이터 조각을 따로 따로 가져갈 필요가 없습니다.

그런 다음 HTML 테이블에 검색어와 스타일을의 결과를 걸리는 부분보기 만들기를 클릭

$(":submit").live('click', function() { 
    $.ajax({ 
     url: "/RecentActivity/RunQuery", 
     type: "POST", 
     data: $("#QueryForm").serialize(), 
     error: function (data) { 
      var errorMessage = $.parseJSON(data.responseText); 
     }, 
     success: function (data) { 
      if (data) { 
       $('#results-div').html(data); 
      } 
      else { 
       $('#results-div').html('no data'); 
      } 
     } 
    }); 

    return false; 
}); 

에 양식을 제출하기 위해이 같은 JQuery와 전화를 사용합니다. 그렇게하면 부분 뷰가 html을 반환하고 성공 핸들러에서 호출을 사용하여 div의 html을 대체 할 수 있습니다. 컨트롤러에 대한 코드에 대한