2011-04-06 23 views
16

tengo una visión simple Wall.cshtml que carga un _Search.cshtml Vista parcial que tiene este aspecto:MVC 3 (Razor) - Standard manera de utilizar un evento de botón para llamar controlador

<h2>The Wall</h2> 
@{Html.RenderPartial("~/Views/Search/_Search.cshtml");} 

El _Search.cshtml Vista parcial (actualizado basándose en la respuesta @Darin) tiene el siguiente aspecto:

@using (Html.BeginForm("Searching", "Search", FormMethod.Post, new { id = "searchForm" }))  
{ 
    <div id="search"> 
     <div id="searchbtn"> 
      <input id="Search" type="button" value="Search" /> 
     </div> 
     <div id="searchtxt"> 
      @Html.TextBox("txtSearch") 
     </div> 
    </div> 
} 

El controlador es el siguiente:

public class SearchController : Controller 
{ 
    public ActionResult Wall() 
    { 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult Searching() 
    { 
     // do something with the search value 
     return View(); 
    } 
} 

Cuando ejecuto la aplicación, el bloque resultante de HTML producido es similar al siguiente:

<form action="/Search/Searching" id="searchForm" method="post"> 
    <div id="search"> 
     <div id="searchbtn"> 
      <input id="Search" type="button" value="Search" /> 
     </div> 
     <div id="searchtxt"> 
      <input id="txtSearch" name="txtSearch" type="text" value="" /> 
     </div> 
    </div> 
</form> 

PREGUNTA 1: ¿Por qué el clic de botón no golpear el Buscando controlador método?
(permítanme repetir que _Search.cshtml es una vista parcial que se ejecuta dentro de una vista llamada Wall.cshtml).

PREGUNTA 2: ¿Cómo obtendré el valor dentro del cuadro de texto "txtSearch"?

PREGUNTA 3: Como se trata de una Vista parcial, ¿cómo puedo hacer que la vista que contiene la Vista parcial de búsqueda actual ... se actualice y actualice con el resultado de la consulta de búsqueda?

Respuesta

17

Sería mejor utilizar un formulario y hacer que el botón de búsqueda enviar:

@using (Html.BeginForm("Search", "Home", FormMethod.Post, new { id = "searchForm" }))  
{ 
    <div id="search"> 
     <div id="searchbtn"> 
      <input id="Search" type="submit" value="Search" /> 
     </div> 
     <div id="searchtxt"> 
      @Html.TextBox("txtSearch") 
     </div> 
    </div> 
} 

En lo que se refiere a su segunda pregunta, usted podría AJAXify este formulario de búsqueda:

$(function() { 
    $('#searchForm').submit(function() { 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      success: function(result) { 
       $('#resultContainer').html(result); 
      } 
     }); 
     return false; 
    }); 
}); 

donde resultContainer podría ser algún div que albergará los resultados de búsqueda devueltos por la acción del controlador.

+0

Solución 1 fue algo que hice antes, pero como se indica en la respuesta original actualizada, el clic de botón nunca alcanza el Searching Método del controlador –

+0

@Filu, y ¿qué sucede cuando inspecciona la solicitud en FireBug? ¿Cuál es la razón para no llegar al controlador? –

+0

Debo admitir que nunca usé Firebug. Acabo de instalarlo. ¿Qué debo buscar cuando hago clic en el botón? –

2

el problema era que el <input id="Search" type="button" value="Search" />
tiene un tipo = BOTÓN

he cambiado el tipo que se ENTRADA ... y que fija el problema.

+0

type = submit también debería funcionar aquí – jcolebrand

0

No se olvide de serializar los datos para empujar también el Modelo de Controlador de Acción:

@model CBS.DataAccess.Entities.SupplierQuoteEntity  
@using (Html.BeginForm("Create", "SupplierQuote", FormMethod.Post, new { id = "SupplierQuoteCreateForm" })) 
{ 
    <div>blablablabla fields...</div> 

    <a class="t-button t-button-icontext" onclick="ajaxSubmit()"><span class="t-icon t-insert"></span>Create</a> 

    <script type="text/javascript"> 
     function ajaxSubmit() { 
      var formData = $("#SupplierQuoteCreateForm").serializeArray(); 

      $.ajax({ 
       type: "POST", 
       url: '@Url.Action("Create", "SupplierQuote")', 
       data: formData, 
       dataType: "json", 
       success: function (data) { 
        alert(data); 
       } 
      }); 
     }   
    </script>  
} 
Cuestiones relacionadas