jquery - mvc ajax/jquery - 单击图像而不重新加载页面

Question

1. 用户单击我的 MVC View 上的图像，然后此 onclick 事件调用 Controller 中的某些方法或操作 - 无需重新加载页面。此方法将返回一些字符串到我的 jquery/ajax 函数(一些数据)。有了这些数据，我可以更改图像边框(问题 - 无需重新加载)。有什么例子我该如何做到这一点？

2. 用户填写文本框，然后单击按钮 - 无需重新加载页面 - 它将添加到此文本框的数据库内容并显示数据库中的所有记录。同样的问题——如何开始？

问候

Answer 1

我已经为您创建了一个示例项目来回答这两个问题，您可以获取它 here从 Google 驱动器(选择"file"->“下载”以下载 .zip 文件夹)，请查看示例项目或按照以下步骤操作:

问题 1 - 单击时更改图像边框

1)将图像 Controller 添加到Controllers文件夹中:

public class ImageController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public int ChangeImageSize()
    {
        return 10;
    }
}

2) 右键单击​​ Index 方法并选择“Add View...”，将名称保留为 Index

将以下标记添加到索引 View ，基本上它的作用是执行一个 jQuery 函数，该函数转到图像 Controller 中的 ChangeImageSize 方法并返回随机值 10。然后将图像的边框宽度设置为此值(并且没有页面刷新!)

@{
    ViewBag.Title = "Index";
}
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#imageLink').on("click", "a,img", function (e) {
            e.preventDefault();
            $.get("@Url.Action("ChangeImageSize","Image")",function(data)
            {
                $("#image").css("border-width",data);
            });
        });
    });
</script>
<h2>
    Index</h2>
<a id="imageLink" href="javascript:;">
    <img id="image" src="../../Images/image.jpg" style="width: 300px; height: 300px;" />
</a>

问题 2 - 在数据库中插入一个值，显示包含新值的列表:

1) 将 ADO.NET 实体数据模型添加到模型文件夹并连接到所需的数据库(或者使用任何其他数据访问方法，我只是使用 EF，因为它很简单)

2)添加一个Employee Controller 到controllers文件夹:

public class EmployeeController : Controller
{
    EmployeeModel dataContext = new EmployeeModel();
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(string employeeName)
    {
        if (!String.IsNullOrEmpty(employeeName))
        {
            Employee emp = new Employee() { EmployeeName = employeeName };
            dataContext.Employees.AddObject(emp);
            dataContext.SaveChanges();
        }

        List<Employee> employees = dataContext.Employees.ToList();
        return View("Partial/AllEmployees",employees);
    }
}

3) 右键单击​​ Index 操作方法并选择“Add View...”，将名称保留为 Index

4) 将以下标记复制到索引 View

@{
    ViewBag.Title = "Employees";
}
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $('form').submit(function () {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        $('#result').html(result);
                    }
                });
                return false;
            });
        });

        $.post("@Url.Action("Index","Employee")",function(data)
        {
            $("#result").html(data);
        });
    });
</script>

@using (Ajax.BeginForm(new AjaxOptions()))
{
    <div>
        Enter your name : @Html.TextBox("employeeName") 
        <input type="submit" value="Insert" />
    </div>
}
<div id="result"></div>

5)在Views->Employee下创建一个名为Partial的文件夹

6) 将新 View 添加到名为 - AllEmployees.cshtml 的 Partial 文件夹

7) 将以下标记添加到 AllEmployees View :

@model IEnumerable<MVCSample.App.Models.Employee>

@{
    Layout = null;
}

<table>
    <tr>
        <th>
            Employee name
        </th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>@Html.DisplayFor(modelItem => item.EmployeeName)</td>
    </tr>
}
</table>