How do get value of razor textbox in the same view?

Question

I am using `@Html.Textbox("searchString") in Razor view page. I need this value of textbox in

@Html.ActionLink("View Items", "Index", new { id = item.transaction_id, searchString = "Value of textbox"}).

Of course the search string part in html action link is not working right now but i need this as i have specific route which works according to search string.

How do i pass value of textbox to action link?

i check this this,this,this and this.

What i tried is

<script type = "text/javascript">
var value = document.getElementbyID("searchString").Text;
var link =  @Html.ActionLink("View Items", "Index", new { id = item.transaction_id, searchString = -1});
link.replace(-1,value);
</script>

Still no luck. I understand Razor renders at server side.

UPDATE

i have following textbox on the top of view:

    @using (Html.BeginForm("Index", "trans_junction", FormMethod.Get))
{
<p>
    Request No: @Html.TextBox("searchString")
    <span><input type="submit" value="Search Request" /></span>
</p>
}

This textbox is search box in which user can search items.

there is an Action link as follows:

 @Html.ActionLink("View Items", "Index", new { id = item.transaction_id }) |

and a route config:

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}/{searchString}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional, searchString= UrlParameter.Optional }
        );
    }
}

Now i need to pass the values as my route map via actionlink. As suggested in answer by StephenMuecke, i tried to modify my @using (Html.BeginForm("Index", "trans_junction", FormMethod.Get)) with @using (Html.BeginForm("Index", "trans_junction", new { id = item.transaction_id }, FormMethod.Get)) but item is not accessible there.

When user click search button, url is http://localhost:57286/trans_junction/Index?searchString=20

if user click on Action link url is http://localhost:57286/trans_junction/Index/88

but i actually need is http://localhost:57286/trans_junction/Index/88/20

which preserve the the result of search and also pass the id.

I am adding screenshots for better understanding.

This is index view without search.

This is search result with searchString = 10.

This is after clicking the action link i.e. View Items, Here search results are not preserved.

When you tried that code at the end, what was the result? What did the actual client-side JavaScript look like, and what was in the `value` and `link` variables when it executed? I *strongly suspect* your browser console is showing JavaScript errors when that code tries to execute. You should definitely take a look at that. — David, Mar 08 '16 at 16:00
You would find this far easier if you use a put the textbox in a form (with `FormMethod.Get`) and style the submit button to look like a link if that what you want (no scripts required). But all you script is doing is updating the `href` attribute. You need to cancel the default redirect and then call `location.href=url;` — , Mar 08 '16 at 21:59
@StephenMuecke i need a textbox vaue, which i can pass with action link so it mach the routeconfig route. — Gaurav Chauhan, Mar 09 '16 at 05:56
You do not need a action link - put the textbox in a form (with `FormMethod.Get` and submit it to the GET method. — , Mar 09 '16 at 05:58
@StephenMuecke i used @Html.beginform with FormMethod.Get override, now i am getting this kind of url: http://localhost:57286/trans_junction/Index/74?searchString=52, as you see i need to pass id along with search string. if i type url like this, http://localhost:57286/trans_junction/Index/74/52, i get desired result but i don`t know how i create a link for this kind of urls. So i am trying to pass it via action link. — Gaurav Chauhan, Mar 09 '16 at 06:18

score 4 · Accepted Answer · 2016-03-09T08:50:44.270

4

Rather than manually trying to manipulate a link using javascript, use a form with method="get". Inside your loop

@using (Html.BeginForm("Index", "trans_junction", new { id = item.transaction_id }, FormMethod.Get))
{
    @Html.TextBox("SearchString")
    <button type="submit">View Items"</button> // style as a link if desired
}

which will make a GET call to

[HttpGet]
public ActionResult Index(int id, string searchString)

which assumes you have a specific route definition with

url: "trans_junction/Index/{id}/{searchstring}",
defaults: new { controller = "trans_junction", action = "Index" }

Edit (based on updated question details)

When your returning the filtered results, you will also need to pass back the value of searchString to the view so that in can be used to generate the route value in the ActionLink() methods, for example

ViewBag.Filter = searchString;
return View(....);

and then modify the links to

@Html.ActionLink("View Items", "Index", new { id = item.transaction_id, searchString = ViewBag.Filter })

edited Mar 09 '16 at 08:50

answered Mar 09 '16 at 06:34

Exactly i have same route.I am testing now. – Gaurav Chauhan Mar 09 '16 at 06:45
Just ensure that that route is first in your route definitions. If you were getting `.../trans_junction/Index/74?searchString=52` it suggests it was after the default route – Mar 09 '16 at 06:49
2

I now see you have only one textbox (which changes everything). I'll rewrite the answer to solve this in an hour or so (essentially when you render the new results based on the search string, you need to pass back the search string to the view (say using `ViewBag.Filter = searchString;`) and the create the links using `@Html.ActionLink("View Items", "Index", new { id = item.transaction_id, searchString = ViewBag.Filter })` – Mar 09 '16 at 07:56
@Html.ActionLink("View Items", "Index", new { id = item.transaction_id, searchString = ViewBag.Filter }) Works as expected.Simple and intuitive.If you are writing answer with more details, i would accept it. – Gaurav Chauhan Mar 09 '16 at 08:04
No time now, but I will update the answer in hour or 2. – Mar 09 '16 at 08:05

score 0 · Answer 2 · answered Mar 08 '16 at 16:14

You need to set the value on an event such as clicking on the ActionLink otherwise how do you know the value of the searchString textbox to replace in the Actionlink. Add this javascript on your page.

$(function(){
    $("#myLink").click(function(){
        var link = $(this).attr("href");
        link.replace(-1, $(#searchString).val());
        var link = $(this).attr("href", link);
    });
});

And you Razor view actionlink needs to be

@Html.ActionLink("View Items", "Index", new { id = item.transaction_id, searchString = "-1"})

Spluf · Answer 3 · 2016-03-08T16:06:37.023

-2

Try:

  @{
     var value = Request.Form["inputID"];
    }

p.s. why aren't you using a form in stead of the link and submit the form when someone enters a searchString?

whoever downvoted this answer you could argument why or come up with a better solution? because in his case, searchString = Request.Form["inputID"]; should do what he is asking for.

edited Mar 08 '16 at 16:06

answered Mar 08 '16 at 16:00

Spluf

810
1
11
26

3

You appear to have misunderstood the question. The OP is asking how to get an `input` value *client-side* and add it to a link. `Request.Form` runs *server-side*. – David Mar 08 '16 at 16:30

How do get value of razor textbox in the same view?

3 Answers3