ASP.Net MVC 4 Display Single Row of Data using button

Question

I am working on an ASP.Net MVC 4 application and trying to display a single row of data from the data base instead of all rows.

The website I am designing has a list of buttons and when each button is clicked the data from the corresponding row in the database is displayed e.g. Button1 - Row1, Button2 - Row2 etc...

Currently this is also displayed on http://myexample/Movies/OneMovie I would like it to be displayed on http://myexample/Movies/

The code I have in my controller is this:

public ActionResult OneMovie(int id = 0)
{
    Movie movie = db.Movies.Single(m => m.ID == id);

    if (movie == null)
    {
        return HttpNotFound();
    }

    return View(movie);
}

The button for my code is:

<input id="Button1" type="button" value="button" name="id"/>
<input id="Button2" type="button" value="button" name="id"/>

Can anyone help me to display my data for the corresponding row when the button is clicked?

Are you wanting to redirect to a view to display the details, or display the details on the same page? — user3559349
– user3559349, Commented Apr 19, 2016 at 8:35
there are a lot of ways to do that. Do you mean how to call "OneMovie" from button or ? — ermir
– ermir, Commented Apr 19, 2016 at 8:42
I would like the data to be displayed on the same page as the button. Current its goes to Movies/OneMovie, I would like to be on the Movies which in the index page. — TerrorTot38
– TerrorTot38, Commented Apr 19, 2016 at 8:44
If you want to be able to open all rows in the same screen, I would load all the buttons and rows in the view and open the rows using javascript or jquery. — Jeroen Doppenberg
– Jeroen Doppenberg, Commented Apr 19, 2016 at 8:45
The idea is that the data will display in a div when the corresponding button is clicked. — TerrorTot38
– TerrorTot38, Commented Apr 19, 2016 at 8:45

ermir · Accepted Answer · 2016-04-19 09:27:43Z

1

ok then when you generate the buttons you loop a collection just to get the id's of all movies, here is the button that you need :

<input type="button" value="Go Somewhere Else" onclick="location.href='@Url.Action("OneMovie", "ControllerName", new { id=1  } )'" />

set into your view id= model.MovieId

this will allow you to make a get request at the action:

    public ActionResult OneMovie(int id)
    {

        return View();
    }

Edit for a ajax get solution

in your index page:

function getMovieById(movieId) {
    var url = "/Home/OneMovie";
    $.getJSON(url, { id: "movieId"}, function (data) {
        /*
        put movie into div here
        */
    });
}

your button will be like:

<input type="button" value="Go Somewhere Else" onclick=getMovieById(1) />

and the action:

public JsonResult OneMovie(int Id)
{
...
var items = db.Movies.Where...
return Json(items , JsonRequestBehavior.AllowGet);
}

edited Apr 19, 2016 at 9:27

answered Apr 19, 2016 at 8:54

ermir

87711 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

TerrorTot38 Over a year ago

Can I use in the Index the same way as OneMovie?

TerrorTot38 Over a year ago

Currently I can't display any data on my index page. In which I had this piece of code - return View(db.Movies.ToList());

ermir Over a year ago

the Index is supposed to be called from URL. in what I understand I think you can go for something like: In index load, you load the first movie and the buttons for all of them. then on each button click you display some partial view in that part of div you were working on.

TerrorTot38 Over a year ago

I would like the data to be displayed on the same page as the button.

ermir Over a year ago

yes, that's why I said a partial view. Or you can go for a JSON solution.

|

Jeroen Doppenberg · Accepted Answer · 2016-04-19 09:43:12Z

0

public class MoviesModel
{
     public List<Movie> Movies  {get;set;}
}

    //get all movies and return to view
    public ActionResult AllMovies()
    {       
       MoviesModel model=new MoviesModel();
       model.Movies=  db.Movies.ToList();
        if (model.Movies== null || model.Movies.Count==0)
        {
            return HttpNotFound();
        }

        return View(model);
    }


//html view
    @model MoviesModel
    @foreach(var movie in Model.Movies){
       <input id="Button1" type="button" value="button" name="movie.Id" onclick="ButtonClicked(movie.Id)"/>
       <div class="hidden" id='movie.Id'>
          <span>...movie info...</span>
       </div>
    }

//javascript

function ButtonClicked(id)
{
   var element= Document.GetEllementById(id)
  //set css class visible 
}


//CSS
.visible
{
display:block;
}

.hide
{
display:none;
}

edited Apr 19, 2016 at 9:43

answered Apr 19, 2016 at 9:33

Jeroen Doppenberg

1,5681 gold badge10 silver badges14 bronze badges

2 Comments

TerrorTot38 Over a year ago

I have just tried this solution but how does it work using a button?

Jeroen Doppenberg Over a year ago

This is roughly the setup, don't have a MVC project open here. But i think it should work on anything...you just need the onclick event. If you use jquery you can also add a little bit of animation

Collectives™ on Stack Overflow

ASP.Net MVC 4 Display Single Row of Data using button

2 Answers 2

13 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related