Pass html control values in Url.Action: MVC - html

Question

I want to pass two parameters in #Url.Action.
View:
<select id="ddlSearchBy" name="ddlSearchBy" style="width: 150px">
<option value="TaxCode">Tax Code</option>
<option value="TaxDescription">Tax Description</option>
<option value="ClassDescription">Class Description</option>
<option value="ZoneName">Zone Name</option>
</select>
<input type="text" name="txtSearchValue" id="txtSearchValue"/>
<button type="button" id="btnDownload">Download</button>
<button type="button" id="btnSearch">Search</button>
On Download button click, I am calling the method "ExportToExcel" in Masters Controller and also I need to pass two parameters. i.e. the selected value of select html and textbox value.
Now, I am using like below;
<button type="button" id="btnDownload" onclick="location.href='#Url.Action("ExportToExcel", "Masters", new { ddlSearchBy = #TempData["ddlSearchBy"], txtSearchValue = #TempData["txtSearchValue"] })'">Download</button>
Can I directly pass the html control values in #Url.Action?
Edited:
Controller:
[HttpPost]
public ActionResult ExportToExcel(string ddlSearchBy, string txtSearchValue)
{
var grid = new GridView();
grid.DataSource = from data in GetTaxMasterTable(ddlSearchBy, txtSearchValue)
select new
{
Code = data.taxCode,
TaxDescription = data.taxDescription,
ClassDescription = data.classDescription,
Location = data.locationShortName,
Zone = data.zoneName,
TaxValue = data.taxValue,
Tax = data.taxPercentage,
ModifiedDate = data.modifiedDate
};
grid.DataBind();
Response.ClearContent();
Response.AddHeader("Content-Disposition", "attachment; filename = TaxMaster.xls");
Response.ContentType = "application/vnd.ms-excel";
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
grid.RenderControl(htw);
Response.Write(sw.ToString());
Response.End();
return RedirectToAction("TaxMaster");
}
jQuery:
$("#btnSubmitDownloadExcel").click(function (e) {
var ddlSearchBy = $("#ddlSearchBy").val();
var txtSearchValue = $("#txtSearchValue").val();
$.ajax({
type: "POST",
url: "/Masters/ExportToExcel",
data: JSON.stringify({ "ddlSearchBy": ddlSearchBy, "txtSearchValue": txtSearchValue }),
contentType: "application/json; charset=utf-8",
datatype: "json",
success: function (data) {
alert(JSON.stringify(data));
},
error: function (data) {
alert("err");
alert(JSON.stringify(data));
}
});
});
This code is not downloading the Excel.

Answer 1

You cannot pass values from input elements using regular hyperlinks (Url.Action) without resorting to javascript.
But you can simply use a form with a method of GET.
<form action="Masters/ExportToExcel" method="get">
<select id="ddlSearchBy" name="ddlSearchBy" style="width: 150px">
<option value="TaxCode">Tax Code</option>
<option value="TaxDescription">Tax Description</option>
<option value="ClassDescription">Class Description</option>
<option value="ZoneName">Zone Name</option>
</select>
<input type="text" name="txtSearchValue" id="txtSearchValue"/>
<button type="submit" id="btnDownload">Download</button>
</form>
Might want to use the Html.BeginForm() helper to generate the form for a more cleaner code, but the end result is the same.
Update - If you already have a form with another submit action
If you don't need to support IE 9 or below, you can use the formaction attribute to have the button change the action of the form.
Example:
<form action="SomeController/Search" method="get">
<select id="ddlSearchBy" name="ddlSearchBy" style="width: 150px">
<option value="TaxCode">Tax Code</option>
<option value="TaxDescription">Tax Description</option>
<option value="ClassDescription">Class Description</option>
<option value="ZoneName">Zone Name</option>
</select>
<input type="text" name="txtSearchValue" id="txtSearchValue"/>
<button type="submit" id="btnSearch">Search</button>
<button type="submit" id="btnDownload" formaction="Masters/ExportToExcel">Download</button>
</form>
In this example, the form will do a get by default on SomeController/Search, when you click the btnSearch button. However, if you click the btnDownload button, the form will do a get request to Masters/ExportToExcel.
If you need to support IE below version 10, you need to use javascript to change the action of the form before you submit it.
Example using jQuery:
<form action="SomeController/Search" method="get">
<select id="ddlSearchBy" name="ddlSearchBy" style="width: 150px">
<option value="TaxCode">Tax Code</option>
<option value="TaxDescription">Tax Description</option>
<option value="ClassDescription">Class Description</option>
<option value="ZoneName">Zone Name</option>
</select>
<input type="text" name="txtSearchValue" id="txtSearchValue"/>
<button type="submit" id="btnSearch" onclick="$(this).closest('form').attr('action','SomeController/Search');">Search</button>
<button type="submit" id="btnDownload" onclick="$(this).closest('form').attr('action','Masters/ExportToExcel');">Download</button>
</form>