Pass html control values in Url.Action: MVC

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>