开发者

MVC 3: jQuery pop up window that only loads when a specific drop down value is selected

开发者 https://www.devze.com 2023-03-08 13:17 出处:网络
I have created an Ajax.BeginForm, which based on a value in a dropdown menu, should either post values to an actionresult or open a modal pop-up window which would contain a list of checkbox items and

I have created an Ajax.BeginForm, which based on a value in a dropdown menu, should either post values to an actionresult or open a modal pop-up window which would contain a list of checkbox items and a submit button. This is what i have at the moment:

        <div class="examplepanel">
            @using (Ajax.BeginForm("PostExample", new AjaxOptions() { UpdateTargetId = "ExamplePopupContainer", HttpMethod = "Post" })) 
            {
                <p>
                    @Html.Label("Exampletype: ", "ExampleTypes", "LabelTitle")<br />
                    @Html.DropDownListFor(m => m.ExampleTypes, Model.ExampleTypes, new { @id = "ExampleType" })
                </p>
                <p>
                    @Html.Label("Example comments: ", "ExampleComments", "LabelTitle")<br />
                    @Html.TextAreaFor(m => m.ExampleComments, Model.ExampleComments)
                </p>
                <p>
                    @Html.SubmitButton("Confirm", 0, "button")
                </p>
            }
        </div>

So the Actionresult could be:

[HttpPost]
    public ActionResult PostExample(string ExampleTy开发者_开发问答pes, string ExampleComments)
    {
    ...
    }

Any ideas/example of how I could go about this would be greatly appreciated.

Thanks.


Below steps might be helpful..

1.Bind the on change event of the dropdown (I hope you are building MVC app with jquery)

$("#ExampleType").change(function(e){

//TODO: Client Business Logic

});

2.List down the cases which will be responsible for opening jquery dialog/pop up window. Use jquery dialog or other jquery plugin for opening popup.

Use below syntax for opening a popup window.

$(<popup control id>).dialog('open')

3.List down other cases which are responsible for posting data to the action (server). Use jquery ajax for posting data to the server

Use below syntax for posting data to the server.

$.post()

Pseudo code:

$("#ExampleType").change(function(e){
    var list_Of_Values_For_Opening_Popup_Window = ['value1','value2']; // or array of integers

    var value = $("OPTION:selected", $(this)).val();
    var is_Need_To_Post_Data = true;
    for(var i=0;i<list_Of_Values_For_Opening_Popup_Window .length;i++)
    {
         if(value==list_Of_Values_For_Opening_Popup_Window[i])//use case sensitive comparison if required.
                {
                   is_Need_To_Post_Data =false;
                   break;
                }
    }
    if(is_Need_To_Post_Data )
    {
       //TODO: Post data to server with ajax call
    }
    else
    {
       //TODO: open popup window
    }

});
0

精彩评论

暂无评论...
验证码 换一张
取 消