如何使用html標籤進行輸入並在沒有Html.BeginForm的情況下在asp.net mvc 5中提交？

Question

net mvc 5應用程序，爲此我使用bootstrap，因爲它看起來很好。

我不想使用的輸入和搜索按鈕的

@using (Html.BeginForm("... 

我可以控制沒有這個HTML標記從我的控制器。例如，下面是我的index.cshtml

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<div class="container"> 
    <div class="row"> 
     <h2>Suche</h2> 
     <div id="custom-search-input"> 
      <div class="input-group col-md-12"> 
       <input type="text" class=" search-query form-control" placeholder="Search" /> 
       <span class="input-group-btn"> 
        <button class="btn btn-danger" type="button"> 
         <span class=" glyphicon glyphicon-search"></span> 
        </button> 
       </span> 
      </div> 
     </div> 
    </div> 
</div> 

我想，如果我點擊搜索按鈕，我得到來自inputfield文本消息。

這裏是控制器：

public ActionResult Search(string value) 
{ 
    //listofUsers is a arraylist of all users that found^^ 

    return View(listofUsers); 
} 

我怎麼能做到這一點？ :)

Answer 1

添加一個div顯示結果：在腳本標籤或鏈接的js文件

<div id="custom-search-input"> 
     <div class="input-group col-md-12"> 
      <input type="text" class=" search-query form-control" placeholder="Search" /> 
      <span class="input-group-btn"> 
       <button class="btn btn-danger" type="button"> 
        <span class=" glyphicon glyphicon-search"></span> 
       </button> 
      </span> 
     </div> 
    </div> 
    <div class="custom-search-result"></div> 

然後：

$(document).ready(function() { 
    $('.custom-search-input').each(function() { 
     var sinput = $(this); 
     var svalue = sinput.find('input'); 
     var sresult = sinput.next('.custom-search-result'); 
     sinput.find('button').click(function() { 
      $.ajax({ 
       url: '/ControllerName/Search?value=' + svalue.val(), 
       type: 'GET' 
      }).done(function (result) { 
       sresult.html(result); 
      }); 
     }); 
    }); 
}); 

這是一個沒有錯誤處理的基本示例。

Answer 2

首先我強烈推薦閱讀Philip Walton (Google) - Decoupling your HTML, CSS and Javascript，這非常好。

這裏我將如何使用MVC充分發揮其潛力。

型號：

// Extensible Programming 
// Using a string limits additional features 
// Future proofing via a class that takes 2 minutes to create 
public class GlobalSearch 
{ 
    public string SearchTerms { get; set; } 
} 

查看：

@Model GlobalSearch 
<div class="container"> 
    <div class="row"> 
    <h2>Suche</h2> 
    <div id="custom-search-input"> 
     @using (Html.BeginForm("Search")) 
     { 
     <div class="input-group col-md-12"> 
     @Html.TextBoxFor(m => m.SearchTerms, new { 
      @class="search-query form-control", 
      placeholder="Search" }) 
     <span class="input-group-btn"> 
      <button class="btn btn-danger" type="button"> 
      <span class=" glyphicon glyphicon-search js-form-submit"></span> 
      </button> 
     </span> 
     </div> 
     } 
    </div> 
    </div> 
</div> 

控制器：

// Strongly Typed Class is Returned 
public ActionResult Search(GlobalSearch search) 
{ 
    return View(listofUsers); 
} 

下面的腳本將需要此稱爲form2js夢幻般的腳本，它正確地轉換產生的任何強類型的形式通過MVC（數組，列表等）到Json中，這將是ModelBinded正確。

$(document).ready(function() { 
    ('.js-form-submit').on('click', function() { 
    var $form = $(this).closest('form'); 
    var json = form2js($form); 
    var ajaxSettings = { 
     url: $form.attr('action'), 
     type: $form.attr('method'), 
     data: json, 
     contentType: "application/json", 
    } 
    $.ajax(ajaxSettings) 
     .done() 
     .always() 
     .fail(); 
    }); 
}); 

當然，這可以很容易地抽象到它自己的JavaScript類/命名空間返回的任何形式的承諾和可重複使用的，簡單地與類js-form-submit一個按鈕，而不是每次都不斷改寫$.ajax一遍遍爲不同的形式。