添加在MVC3中調用JS函數的提交事件

我在MVC3項目中調用JS方法的問題有一個問題：我有一個「搜索」頁面沒有帶有兩個按鈕的窗體 - 搜索和取消。點擊搜索在ProductDefinition中運行JS函數runSearch。添加在MVC3中調用JS函數的提交事件

<div id="productSearch-dialog" class="modal fade" style="width: 1000px; display: none"> 
<div class="modal-header"> 
    <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button> 
    <h3>Search Results</h3> 
</div> 
<div class="modal-body" style="height: 650px;"> 
    <div> 
     <input id="inputname" type="text" /><font class="red-font" id="lblrequired" style="display: none">*</font> 
    </div> 
    <div id="searchresultcontain" class="grid"> 
    </div> 
    <div id="Pagination" class="pagination"> 
    </div> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" onclick="productDefinition.runSearch();">Search</button> 
    <button class="btn btn-primary" data-dismiss="modal">Cancel</button> 
</div>

我怎樣才能運行這個js方法（runSearch）當我按？據我瞭解，這將是onsubmit事件是表單事件，所以我需要添加帶有onsubmit屬性的表單元素。我試着周圍輸入字段BeginForm helper方法：

@using (Html.BeginForm(new { onsubmit = "productDefinition.runSearch();" })) 
{ 
    <input id="inputname" type="text" /><font class="red-font" id="lblrequired" style="display: none">*</font> 
    <input type="submit" value="Submit" style="visibility: hidden" /> 
}

但它似乎並沒有工作 - 當我按下進入我由於某種原因，獲得頁面的源和本地主機到達/的onsubmit = productDefinition.runSearch （）URL。
什麼是問題的根源，以及如何針對onslick獲取與onclick相同的行爲？

來源

2013-02-13 Ypsilon IV

其中的js你不會當你點擊搜索按鈕使用功能？ – Rajpurohit 2013-02-13 11:21:04

您是否可以在提交表單時運行JavaScript？ – 2013-02-13 12:23:42

當onlick - 是的，onsumbit沒有 – 2013-02-13 12:25:22

@using (Html.BeginForm(new { onsubmit = "return runSearch();" })) 



<script type="text/javascript"> 
    function runSearch() { 
      // your logic to perform the search. 
      return true; 
    } 
</script>

來源

2013-02-13 11:20:40

我不認爲這將工作，因爲MVC會將您的參數視爲路由值的集合 - http://msdn.microsoft.com/en-us/library/dd470793(v = vs108）.aspx – 2013-02-13 11:27:08

@Sergey它應該使用HTML Helper重載而不是RouteValues。 OP可以使用哪種超載最適合他，作爲附加參考：http：//chenz101tutorials.blogspot.co.uk/2010/10/submit-form-using-aspnet-mvc.html – 2013-02-13 11:31:23

但是隻有兩個重載HtmlHelper.BeginForm採用單個參數，並將其作爲routeValue威脅。你的鏈接也證明了這一點，他們是這樣指定ID屬性：'Html.BeginForm（null，null，FormMethod.Post，new {id =「myForm」}）' – 2013-02-13 11:39:57

您需要使用following version of BeginForm method才能指定html屬性。

但是，使用內聯JavaScript被認爲是不好的做法，因此我建議將id和id屬性分配給您的表單，並在外部JavaScript文件中處理其提交事件。如果你正在爲你的項目使用jQuery，下面是他們的文檔 - http://api.jquery.com/submit/的一個很好的例子。在計劃JavaSCript中，它有點棘手，但仍然很容易。

來源

2013-02-13 11:23:38

runSearch JS函數位於ProductDefinition.js中。所以我必須這樣做：使用（@ Html.BeginForm（new {id =「searchForm」}「））{...} 和ProductDefinition.js中的$：」（searchForm「（）{;} {runSearch（）; return false}）; 該文件中的所有條目都像func_name：function（）如何打包sumbit處理程序？ – 2013-02-13 11:41:31

幾乎，您的代碼應該看起來像這樣 - 'Html.BeginForm（null，你可以添加提交處理程序到ProductDefinition.js文件的末尾，就像這樣 - '$（function（）{$（「searchForm」）。submit（null），FormMethod.Post，new {id =「searchForm」}） function（）{runSearch（）; return false}）;}）' – 2013-02-13 11:59:44

@model Models.Person 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#registerInputId').click(function() { 
      alert('what do you do before send? For example encrypt the password'); 

      $('#Password').val(CryptoJS.MD5($('#Password').val())); 
     }) 
    }); 
</script> 

@using (Html.BeginForm()) 
    { 
    @Html.AntiForgeryToken() 
    <div class="form-horizontal" style="display: inline-block; margin: 5% auto;"> 
     <div style="font-size: 18px; margin-right:2px; margin-bottom:20px; text-align:right;">Add form</div> 
     @Html.ValidationSummary(true) 
     <div class="form-group"> 
      @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-5" }) 
      <div class="col-md-7"> 
       @Html.EditorFor(model => model.Name) 
       @Html.ValidationMessageFor(model => model.Name) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-5" }) 
      <div class="col-md-7"> 
       @Html.EditorFor(model => model.Password) 
       @Html.ValidationMessageFor(model => model.Password) 
      </div> 
     </div> 

     <div class="form-group" style="margin-top: 30px;"> 
      <div class="col-md-offset-3 col-md-6"> 
       <input id="registerInputId" type="submit" value="Register" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
}

來源

2015-01-28 09:08:15 ajcarracedo

Form.Id如果onsubmit處理程序實現通用的功能，適用於各種形式的需要。（例如：禁用所有輸入字段）

形式

@using (Html.BeginForm(new { 
    id = "form24", 
    onsubmit = "return onSubmitHandler(id);" 
}))

處理

<script type="text/javascript"> 
    function onSubmitHandler(formId) { /*formId is form24 */ } 
</script>

來源

2016-12-07 10:15:38 tchelidze

添加在MVC3中調用JS函數的提交事件

回答

相關問題