call code behind functions with html controls

Question

I have a simple function that I want to call in the code behind file name Move and I was trying to see how this can be done and Im not using asp image button because not trying to use asp server side controls since they tend not to work well with ASP.net MVC..the way it is set up now it will look for a javascript function named Move but I want it to call a function named move in code behind of the same view

 <img alt='move' id="Move" src="/Content/img/hPrevious.png" onclick="Move()"/>


protected void Move(){

}

//based on Search criteria update a new table

 protected void Search(object sender EventArgs e)
{
 for (int i = 0; i < data.Count; i++){
 HtmlTableRow row = new HtmlTableRow();
 HtmlTableCell CheckCell = new HtmlTableCell();
 HtmlTableCell firstCell = new HtmlTableCell();
 HtmlTableCell SecondCell = new HtmlTableCell();
 CheckBox Check = new CheckBox();
 Check.ID = data[i].ID;
 CheckCell.Controls.Add(Check);
 lbl1.Text = data[i].Date;
 lbl2.Text = data[i].Name;
  row.Cells.Add(CheckCell);
  row.Cells.Add(firstCell);
  row.Cells.Add(SecondCell); 
  Table.Rows.Add(row);
}

}

Answer 1

You cannot do postbacks or call anything in a view from JavaScript in an ASP.NET MVC application. Anything you want to call from JavaScript must be an action on a controller. It's hard to say more without having more details about what you're trying to do, but if you want to call some method "Move" in your web application from JavaScript, then "Move" must be an action on a controller.

Based on comments, I'm going to update this answer with a more complete description of how you might implement what I understand as the problem described in the question. However, there's quite a bit of information missing from the question so I'm speculating here. Hopefully, the general idea will get through, even if some of the details do not match TStamper's exact code.

Let's start with a Controller action:

public ActionResult ShowMyPage();
{
    return View();
}

Now I know that I want to re-display this page, and do so using an argument passed from a JavaScript function in the page. Since I'll be displaying the same page again, I'll just alter the action to take an argument. String arguments are nullable, so I can continue to do the initial display of the page as I always have, without having to worry about specifying some kind of default value for the argument. Here's the new version:

public ActionResult ShowMyPage(string searchQuery);
{
    ViewData["SearchQuery"] = searchQuery;
    return View();
}

Now I need to call this page again in JavaScript. So I use the same URL I used to display the page initially, but I append a query string parameter with the table name:

http://example.com/MyControllerName/ShowMyPage?searchQuery=tableName

Finally, in my aspx I can call a code behind function, passing the searchQuery from the view data. Once again, I have strong reservations about using code behind in an MVC application, but this will work.

How to call a code-behind function in aspx:

<% Search(ViewData["searchQuery"]); %>

I've changed the arguments. Since you're not handling an event (with a few exceptions, such as Page_Load, there aren't any in MVC), the Search function doesn't need the signature of an event handler. But I did add the "tablename" argument so that you can pass that from the aspx.

Once more, I'll express my reservations about doing this in code behind. It strikes me that you are trying to use standard ASP.NET techniques inside of the MVC framework, when MVC works differently. I'd strongly suggest going through the MVC tutorials to see examples of more standard ways of doing this sort of thing.

Answer 2

Scott Guthrie has a very good example on how to do this using routing rules.

This would give you the ability to have the user navigate to a URL in the format /Search/[Query]/[PageNumber] like http://site/Search/Hippopotamus/3 and it would show page 3 of the search results for hippopotamus.

Then in your view just make the next button point to "http://site/Search/Hippopotamus/4", no javascript required.

Of course if you wanted to use javascript you could do something like this:

function Move() {
    var href = 'http://blah/Search/Hippopotamus/2';
    var slashPos = href.lastIndexOf('/');
    var page = parseInt(href.substring(slashPos + 1, href.length));
    href = href.substring(0, slashPos + 1);

    window.location = href + (++page);
}

But that is much more convoluted than just incrementing the page number parameter in the controller and setting the URL of the next button.