ASP.Net MVC 4使用按钮

时间:2016-04-19 08:33:49

标签: c# jquery asp.net asp.net-mvc asp.net-mvc-4

我正在开发一个ASP.Net MVC 4应用程序,并试图从数据库而不是所有行显示单行数据。

我正在设计的网站有一个按钮列表,当点击每个按钮时,显示数据库中相应行的数据,例如Button1 - Row1,Button2 - Row2等......

目前这也显示在http://myexample/Movies/OneMovie上我希望它显示在http://myexample/Movies/

我控制器中的代码是:

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

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

    return View(movie);
}

我的代码按钮是:

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

点击按钮时,有人可以帮我显示相应行的数据吗?

2 个答案:

答案 0 :(得分:1)

好的,然后当你生成按钮时,你只需要循环收集所有电影的ID,这里就是你需要的按钮:

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

设置为您的视图 id = model.MovieId

这将允许您在操作中发出获取请求:

    public ActionResult OneMovie(int id)
    {

        return View();
    }

编辑ajax get解决方案

在您的索引页面中:

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

你的按钮就像:

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

和行动:

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

答案 1 :(得分: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;
}