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

【问题标题】：mvc ajax/jquery - click image without reload pagemvc ajax/jquery - 单击图像而不重新加载页面
【发布时间】：2013-04-04 07:26:06
【问题描述】：

用户单击我的 MVC 视图上的图像，然后此 onclick 事件调用控制器中的某些方法或操作 - 无需重新加载页面。此方法将返回一些字符串到我的 jquery/ajax 函数（一些数据）。有了这些数据，我可以更改图像边框（问题 - 无需重新加载）。任何示例我该怎么做？
用户填写文本框，然后单击按钮 - 无需重新加载页面 - 它将添加到此文本框的数据库内容并显示数据库中的所有记录。同样的问题 - 如何开始？

问候

【问题讨论】：

在图像上方分配一些跨度并在成功的 ajax 调用时填充。

标签： jquery ajax asp.net-mvc

【解决方案1】：

我已经为您创建了一个示例项目来回答这两个问题，您可以从 Google 驱动器获取它here（选择文件->下载以下载 .zip 文件夹），查看示例项目或关注步骤如下：

问题 1 - 点击时更改图片边框

1) 将 Image 控制器添加到 Controllers 文件夹：

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

    public int ChangeImageSize()
    {
        return 10;
    }
}

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

将以下标记添加到 Index 视图，基本上它的作用是执行一个 jQuery 函数，该函数转到 Image 控制器中的 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 控制器添加到控制器文件夹：

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 操作方法并选择“添加视图...”，将名称保留为 Index

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

@{
    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) 向 Partial 文件夹添加一个新视图 - AllEmployees.cshtml

7) 将以下标记添加到 AllEmployees 视图：

@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>

【讨论】：

【解决方案2】：

尝试了解 Ajax.BeginForm。这涵盖了您的两个问题。

这是一个示例：

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

</div>

【讨论】：