Is there a way to define inner Ajax.BeginForm inside my aps.net MVC

Question

I have the following code inside my asp.net mvc 4.0 web application. this view is a search view, which have search fields, and an Ajax.BeginForm to call the search action method:-

@using (Ajax.BeginForm("AdvanceSearchIndex", "Home",
new AjaxOptions
{
    HttpMethod = "get",
    InsertionMode = InsertionMode.Replace,
    LoadingElementId = "progress",
    UpdateTargetId = "SearchTable"

}))
{


  <div>
    <span class="f">@Html.DisplayNameFor(model => model.ip) </span> 

    @Html.EditorFor(model => model.ip) @Html.DropDownListFor(a => a.ipselection, Model.NameSelectionOptions)
    @Html.ValidationMessageFor(model => model.ip)
</div>

        <div>
    <span class="f">@Html.DisplayNameFor(model => model.mac)  </span> 

    @Html.EditorFor(model => model.mac) @Html.DropDownListFor(a => a.macselection, Model.NameSelectionOptions)
    @Html.ValidationMessageFor(model => model.mac)
</div>

   <div>
    <span class="f">@Html.DisplayNameFor(model => model.AssetTypeID) </span>

   @Html.DropDownListFor(model => model.AssetTypeID, ((IEnumerable<TMS.Models.TechnologyType>)ViewBag.Techtypes).Select(option => new SelectListItem
{
    Text = (option == null ? "None" : option.Name),
    Value = option.AssetTypeID.ToString(),
    Selected = (Model != null) && (option.AssetTypeID == (int)ViewBag.AssetTypeID)
}), "All",new { @class = "SmallDropDown5" })
       @Html.ValidationMessageFor(model => model.AssetTypeID)
</div>
 <input class="btn btn-success" type="submit" value="Search" /> <span>&nbsp; &nbsp;</span>
    <input type="reset" value="Reset" class='btn' />
    <img src="~/Content/Ajax-loader-bar.gif" class="loadingimage" id="progress" />  

}

now i want to add a button named "Export To CSV" beside the "Search" button, where users can click on the Export button and this will call another action method which will do the export operation. so inside the export action method i will need to pass the same search parameters, so the export data will be only for the related records. so i tried to define the Export button as a parent and the search as an inner button. so when users click on the Export they will actually resubmit the search fields, here is my updated code:-

@using (Ajax.BeginForm("Export", "Home",
new AjaxOptions
{
    HttpMethod = "get",
    InsertionMode = InsertionMode.Replace,
    LoadingElementId = "progress",
    UpdateTargetId = "SearchTable"

}))
{
using (Ajax.BeginForm("AdvanceSearchIndex", "Home",
new AjaxOptions
{
    HttpMethod = "get",
    InsertionMode = InsertionMode.Replace,
    LoadingElementId = "progress",
    UpdateTargetId = "SearchTable"

}))
{
 //code goes here 
 <input class="btn btn-success" type="submit" value="Search" /> 
    <input type="reset" value="Reset" class='btn' />
    <img src="~/Content/Ajax-loader-bar.gif" class="loadingimage" id="progress" />  

}
 <input class="btn btn-success" type="submit" value="Export" /> 
 }

but when i clcik on the Export button nothing will happen... and when i click on the Search the Export actin method will be called.. so is there a way to have nested Ajax.Beginform??

No, nested forms are invalid html and not supported. Just delete the obsolete `Ajax.BeginForm()` methods and use `$.ajax()` methods which give you far more flexibility. — , Nov 10 '17 at 21:06

score 0 · Answer 1 · answered Nov 10 '17 at 13:41

0

Nested forms are not allowed in HTML 5 (see https://stackoverflow.com/a/26536925/3111689).

I would suggest to give your filters some kind of id (e.g id="filter_ip") and then run the following JavaScript on your button:

window.location = '/Export?ip=document.getElementById("filter_ip")&mac=...';

If there are more parameters which length would exceed the Limit of a get request, you can do a post via JavaScript/Ajax.

answered Nov 10 '17 at 13:41

Stofa

25
5

but in my case i will not be able to modify the url with search parameters.. as i am doing ajax based submit.. – John John Nov 10 '17 at 14:05
in the example i provided you'll not do any submit. You redirect the client to your export action with the parameters that you read from the gui. As the browser then gets a file as response the user will not see any changes on the site and gets prompted to download your generated csv. – Stofa Nov 10 '17 at 14:13

Is there a way to define inner Ajax.BeginForm inside my aps.net MVC

1 Answers1