Question

使用jquery和asp.net mvc（razor）

如何将动态内容加载到div中？

e.g。

用户点击按钮
从db。
使用相关标记填充div这个数据 - div，id的类围绕着这些数据。每行数据。

感谢

Answer 1

像往常一样，你从一个模特开始：

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

然后是一个存储库，它将定义此模型的操作：

public interface IPersonsRepository
{
    IEnumerable<Person> GetPersons();
}

接下来你可以实现它：

public class PersonsRepositoryInMemory: IPersonsRepository
{
    public IEnumerable<Person> GetPersons()
    {
        return Enumerable.Range(1, 10).Select(i => new Person {
            FirstName = "first " + i,
            FirstName = "last " + i
        });
    }
}

显然，根据您使用的数据访问技术和数据库类型，此实现会有所不同。在我的例子中，我使用的是内存数据库。

然后是控制器：

public class PersonsController : Controller
{
    private readonly IPersonsRepository _repository;
    public class PersonsController(IPersonsRepository repository)
    {
        _repository = repository;
    }

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

    public ActionResult List()
    {
        var persons = _repository.GetPersons();        
        return View(persons);
    }
}

最后我们可以定义相应的视图：

首先，我们应该将jquery包含在布局的<head>部分中：

<script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.4.4.js")"></script>

然后索引视图（~/Views/Persons/Index.cshtml）可以包含一个按钮，该按钮将使用AJAX调用和内容占位符加载List操作，其中将显示结果：

@Html.ActionLink("Load persons", "list", null, new { id = "load" })
<div id="result"></div>
<script type="text/javascript">
$('#load').click(function() {
    // unobtrusively enhance the anchor
    // this script should be externalized into
    // a separate file
    $('#result').load(this.href);
    return false;
});
</script>

，最后一部分将是List视图（~/Views/Persons/List.cshtml）：

@model IEnumerable<YourAppName.Models.Person>
@{
    Layout = null;
}
<table>
    <thead>
        <th>First name</th>
        <th>Last name</th>
    </thead>
    <tbody>
        @Html.DisplayForModel()
    </tbody>
</table>

以及将为每个人呈现到集合中的相应显示模板（~/Views/Persons/DisplayTemplates/Person.cshtml）：

@model YourAppName.Models.Person
<tr>
    <td>@Model.FirstName</td>
    <td>@Model.LastName</td>
</tr>

Answer 2

这是一个选项...

当单击该按钮时，调用一个javascript函数，该函数在控制器上执行方法的ajax调用。设置此方法以从db执行检索。格式化返回的值并将其插入div。

以下示例假定您已在页面上包含JQuery库...



  function JSFunctionThatFillsTheDiv()
  {          

        methodAction = mainUrl + "/MyController/AddTextToMyDetail";
        $.ajax({

            dataType: 'html',
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                // process you'd like to occur on error... ie: show error in another error div
            },

            success: function(data) {
             $("#IDOfMyDetailsDiv").html("");     <-CLEAR the div
             $("#IDOfMyDetailsDiv").html( data);  <-INSERT the returned data              

                  },
            url: methodAction

        });

function JSFunctionThatFillsTheDiv() { methodAction = mainUrl + "/MyController/AddTextToMyDetail"; $.ajax({ dataType: 'html', error: function(XMLHttpRequest, textStatus, errorThrown) { // process you'd like to occur on error... ie: show error in another error div }, success: function(data) { $("#IDOfMyDetailsDiv").html(""); <-CLEAR the div $("#IDOfMyDetailsDiv").html( data); <-INSERT the returned data }, url: methodAction });

使用jquery和asp.net mvc加载每行数据标记的动态数据

2 个答案: