Javascript POST和按钮提交

所以，这是我今天注意到的奇怪行为。Javascript POST和按钮提交

我有一个从SurfaceController继承的控制器。

我有一个[发布]操作方法，返回到相同的局部视图，这很好。原因是由于该页面上发生的分页/过滤。

现在，在视图本身，如果我使用按钮提交，我看到所有提交的东西都很好。但是，如果我使用带有onclick事件的超链接来设置隐藏的字段值，然后执行form.submit（），那么最初模型的值为null，但随后它将重新执行提交价值再次到位！

这没有意义。按钮提交和做一个form.submit（）的JavaScript函数有什么区别？

真的是没有太多的代码：

//控制器

[HttpPost] 
public PartialViewResult FilterResultsForTransaction(MyModel model) 
{ 
..... 
}

//查看

<script language="javascript">  
function ApplySort(fieldname, sortDir) 
{ 
    $('#Filter_FieldName').val(fieldname);  
    $('#Filter_SortDir').val(sortDir); 
    //var form = $('#form'); 
    //form.submit(); 
} 
</script>

< 剪断>

<input type="submit" onclick="javascript:ApplySort('OrderDate'........)" value="ASC" />

ASC

现在，如果我不使用提交按钮，而只是在JS函数中的form.submit（）中使用超链接和注释 - 它会发布帖子，但模型值为null/default，然后它回忆起自己的价值再次被填充。

想法？！

来源

2014-08-29 Ahmed ilyas

页面上是否存在JavaScript错误？ – 2014-08-29 19:59:34

无............ – 2014-08-30 05:39:22

当您单击提交按钮时，页面将在ApplySort（）中的脚本完成之前提交其数据。所以你必须停止提交，然后设置隐藏的字段值，然后提交表单。像这样：

<input type="submit" data-field="bla" data-sort="ASC" value="Sort ASC" /> 


<script>  
    $("input").on("click", ApplySort) 

    function ApplySort(e) 
    { 
     e.preventDefault(); //stop postback 
     var btn = $(this); 
     var form = $('#form'); 

     $('#Filter_FieldName').val(btn.attr("data-field")); 
     $('#Filter_SortDir').val(btn.attr("data-sort")); 

     console.log("submit") 
     form.submit(); 
    } 
</script>

它通常在onclick中有脚本代码，所以我将js代码中的click事件与jQuery绑定在一起。在此处测试：http://jsfiddle.net/03gj1r02/2/

来源

2014-08-30 10:41:12

谢谢。但在onclick中使用脚本代码永远不会“坏” - 您提供的代码与JQuery不同，除了JQuery，但将事件附加到指定的控件...与onclick函数相同的事情 – 2014-08-30 17:28:49

@Ahmedilyas是的我知道它做同样的事情，但它不是很好的做法，在onclick绑定你的js的东西。在此处查看更多内容：http://en.wikipedia.org/wiki/Unobtrusive_JavaScript和http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick – 2014-08-30 20:14:31

Javascript POST和按钮提交

回答

相关问题