ASP.NET MVC - Ajax.BeginForm - 表单提交时有条件弹出模式对话框?

时间:2011-11-20 23:18:43

标签: ajax asp.net-mvc-3 modal-dialog

我有一个投票控件,有几个按钮。它是使用Ajax.BeginForm实现的,该voteTypeHidden具有名为ViewState["VoteError"的隐藏字段。只要单击任何投票按钮,它就会更改voteTypeHidden的值,以更新正在投射的投票类型。此表单将提交给服务器,并使用ModalDialog(button, text, fadeOut) ]报告任何错误。现在,我想使用我的javascript函数

显示此错误
    <script  type = "text/javascript">
    var voteClickEnabled = true; 
    function voteClicked_Set(value) {
        var voteType = value;
        document.getElementById("voteTypeHidden").setAttribute("value", value); 
    }
    function voteBegin() {
        //alert("begin"); 
        if (voteClickEnabled == false) {
            return false;
        }
        else {
            voteClickEnabled = false;
            return true;
        }
    }
    function voteEnd() {
        //alert("end"); 
        voteClickEnabled = true;
    }

</script>

如何做到这一点? 传递给ModalDialog函数的text参数是ViewState [“VoteError”]非常重要。

顺便说一下,没有必要,但我也发布了我正在使用的代码。

这是javascript:

<div id  = "updateVotes">
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>


Favorite : 
    <%=Html.Encode(ViewData["FavoriteCount"]) %>

<%//if(((int)ViewData["VoteBits"] & 1) == 0) 
{%>
    <% using (Ajax.BeginForm("Voting", "Vote", new {voted = ViewData["voted"], favorited = ViewData["favorited"], markedspam = ViewData["markedspam"],  VotingOnId = (long)ViewData["VotingOnId"], VoteOn = (int)ViewData["VoteOn"], num_votes = 0, num_favorite = (int?)ViewData["FavoriteCount"], sdg = (int?)ViewData["sdg"], category = (int?)ViewData["category"] }, new AjaxOptions { UpdateTargetId = "updateVotes", OnBegin = "voteBegin", OnComplete = "voteEnd"  }))
       {%>
        <%=Html.Hidden("voteTypeHidden", "temp", new { id = "voteTypeHidden" })%>
        <%if ((bool)ViewData["voted"] == false)
          { %>
        <%=Html.SubmitImage("voteButton", Url.Content("/Images/thumb_up.png"), new {value = "1", onclick = "voteClicked_Set(this.value)" })%>
        <%}
          else
          { %>
        <%=Html.SubmitImage("voteButton", Url.Content("/Images/cancel.png"), new { value = "2", onclick = "voteClicked_Set(this.value)" })%>
        <%} %>
         <%if ((bool)ViewData["favorited"] == false)
           { %>
        <%=Html.SubmitImage("voteButton", Url.Content("/Images/star_off_32.png"), new { value = "3", onclick = "voteClicked_Set(this.value)" })%>
         <%}
           else
           { %>
        <%=Html.SubmitImage("voteButton", Url.Content("/Images/star_32.png"), new { value = "4", onclick = "voteClicked_Set(this.value)" })%>
         <%} %>
         <%if ((bool)ViewData["markedspam"] == false)
           { %>
        <%=Html.SubmitImage("voteButton", Url.Content("/Images/error.png"), new { value = "5", onclick = "voteClicked_Set(this.value)" })%>
        <%}
           else
           { %>
        <%=Html.SubmitImage("voteButton", Url.Content("/Images/error_go.png"), new { value = "6", onclick = "voteClicked_Set(this.value)" })%>
        <%} %>
    <%}%>
<%}%>
<div id = "testingAjax">
</div>

<% if (!string.IsNullOrEmpty((string)ViewData["VoteError"])) { %>
<script type = "text/javascript">
    ModalDialog("testingAjax", "asd", false);
</script>
<%} %>
</div>

以下是观点:

{{1}}

1 个答案:

答案 0 :(得分:0)

只是做普通的html按钮图像都具有相同的类但你的html属性说data-votetype =“”

根据按钮类投票的想法,将隐藏的div放在页面顶部,称为结果或反馈或类似的东西:

$('.vote').live("click",function(e){
    var voteType = $(this).attr("data-votetype");
    // do post to JsonResults
    $.ajax(
     url: "",
     type:"POST",
     data:{id:$("#idfield").val(),votetype:voteType},
     dataType:"json",
     success: function(data){
        $("#feedback").html(data.Message).show(); 

     },
     error:function(a,b,c){ $("#feedback").html("Error description: " + b).show(); }
    );
});

如果您打算使用ajax,您可以使用其设计的数据模型,这是一个JSON响应,示例代码:

public class JsonResponseModel {
      public bool Success {get;set;}
      public string Message {get;set;}
}

public JsonResults CastVote(int id, int votetype){
      var model =  new JsonREsponseModel{ Success = false };
      // do code in try catch. change model to reflect success and message
      return Json(model);
}