Question

I have a page, it has a drop down list, which contains the names of objects to edit. I have this working so that when you select an item, an AJAX call loads the text and it shows in a textarea. Now I want to do ‘save’, ‘save as’ and ‘delete’ buttons, which would make their own AJAX calls to do the obvious. The Save As would need to use jquery to show a popup to ask for the name to save as. In each case, I want to pass data that is in elements outside the form, to the server. I can’t have all three buttons in different forms, all contain the text area to pass the text in, and I need the selected value from the drop list, which is already it’s own form, outside the form that contains the text area. I can see how I could use one AJAX call and pass all sorts of data that needs parsing to work out what I should do with it, but that seems ugly to me. Is there a neat way, perhaps using JSON ( not not necessarily ), that I can pass the values of controls on my page, but outside my form, in to an AJAX call ?

So for example, I have this:

    @using (Ajax.BeginForm(new AjaxOptions 
   {
       Url = Url.Action("GetCoupon"),
       OnSuccess = "OnLoadSuccess"
    }))
    {
           @Html.DropDownList("ddlCoupons", 
          Model.Coupons.Select(a => new SelectListItem { Text = a.Name, Value = a.CouponId.ToString() }), 
          "--Empty--",new{
          onchange = "OnSelectCoupon();"
    });
       <input type="submit" value="Load" id="sbmtCoupon" style="visibility:hidden"/>
   }

now, this works. But then I have another AJAX form:

@using (Ajax.BeginForm(new AjaxOptions
 {
     Url = Url.Action("SaveCoupon")
 }))
{
    <input type="submit" value="Save" />
}

I want to pass the selected id of the drop down list, and the text of a text area, to this AJAX call. Right now, I am adding some hidden fields and handling change events to fill the fields in each form ( there’s three actions ), so they send what I need, but I’d like to just have some javascript run to build the value passed in, by searching for values across the form.

Answer 1

cant say that i have understood your question but it seems like you need to prevent the default posting of from you can try something like

i assume these are the only botton on the page, so hook them up to the click event

$("button").click(function(e){
e.preventDefault(); //prevent the default behaviour of the form 
var buttonpPressed = $(this).data("val");  //get which button is pressed
var valueOfField = $("#idOfyourDDL").val();
$.post("/Home/Index",{buttonPressed:buttonPressed,value:valueOfField},function(data){
//this is the callback which will execute upon successful ajax post
alert(data.actionPerformed);
},'josn');
});

[HttpPost]
the ActionResult would look like

public ActionResult(string buttonPressed){

if(buttonPressed=="saveas"){
// perform some action
return Json(new{actionPerformed="saveas"});
}
else{
//perform someother action
return Json(new{actionPerformed="save"});
}
}