Question

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

此致

Answer 1

尝试学习Ajax.BeginForm。这涵盖了你的两个问题。

这是一个示例：

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

</div>

Answer 2

我已经创建了一个示例项目供您回答这两个问题，您可以从Google驱动器中获取here（选择文件 - ＆gt;下载以下载.zip文件夹），或者查看示例项目或按照以下步骤操作：

问题1 - 点击

更改图像边框

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

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

    public int ChangeImageSize()
    {
        return 10;
    }
}

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

将以下标记添加到“索引”视图中，基本上它执行的是执行jQuery函数，该函数转到Image控制器中的ChangeImageSize方法并返回随机值10.I然后将图像的边框宽度设置为此值（并且没有页面刷新！）

@{
    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控制器添加到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）将以下标记复制到索引视图

@{
    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-＆gt; Employee下创建一个名为Partial

的文件夹

6）将新视图添加到名为 - AllEmployees.cshtml

的Partial文件夹中

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>

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

2 个答案:

问题1 - 点击

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