zoukankan      html  css  js  c++  java
  • MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求

    假如有一个数据表格UserInfo:

    public class UserInfo
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Pwd { get; set; }
        public int Sex { get; set; }
    }

    控制器下Action方法:UserInfos

    表单提交过来后UserInfo user对象可以获取到value值,只要html标签的name值与UserInfo下的属性名相同

    public ActionResult UserInfos(UserInfo user)
    {
        if (user.Name != "admin" && user.Pwd != "123")
        {
            return Content("用户名或密码错误");
        }
        else
        {
            return Content("登录成功");
        }
    }

    html代码(表单提交):

    @using (Html.BeginForm("UserInfos", "Home", FormMethod.Post))
    {
        <input type="text" name="Id" value="" />
        <input type="text" name="Name" value="" />
        <input type="text" name="Pwd" value="" />
        <select name="Sex">
            <option value="-1">请选择</option>
            <option value="1"></option>
            <option value="0"></option>
        </select>
        <input type="submit" id="btnOK" value="提交" />
    }

    html代码(异步表单表单提交):

    @using (Ajax.BeginForm("UserInfos", "Home", new AjaxOptions() { Confirm = "您确定要提交吗?", HttpMethod = "post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "result", LoadingElementId = "loading", OnSuccess = "afterSuccess", OnFailure = "afterError" }))
    {
        <input type="text" name="Id" value="" />
        <input type="text" name="Name" value="" />
        <input type="text" name="Pwd" value="" />
        <select name="Sex">
            <option value="-1">请选择</option>
            <option value="1"></option>
            <option value="0"></option>
        </select>
        <input type="submit" id="btnOK" value="提交" />
    }
        <span style="color:red;font-size:10px;" id="result"></span>
        <div id="loading" style="display:none;">
            <img src="~/Content/loading.jpg" />
        </div>

    上面的InsertionMode = InsertionMode.Replace为追加数据

    UpdateTargetId = "result"为请求返回的数据填充到这个ID值

    OnSuccess = "afterSuccess"和 OnFailure = "afterError"为成功与失败要执行的JS函数

  • 相关阅读:
    poj 3624 (背包入门)
    poj 2175(最消费用最大流消圈法判断是否为最小费用)
    poj 2195 (最小费用最大流)
    poj 3659 (树上的最小支配集)
    Codeforces Beta Round #76 (Div. 1 Only)
    poj 2516(最小费用最大流)
    2013 腾讯马拉松初赛 第0场
    批量重命名,把文件名中的(1)去掉。
    ms sql server 添加列,删除列。
    winform 获取当前程序所在目录。
  • 原文地址:https://www.cnblogs.com/genesis/p/5247711.html
Copyright © 2011-2022 走看看