MVC基础(下拉框,单选按钮,弹出框、确认框、局部视图)

428 阅读2分钟

MVC下拉框

public IEnumerable<SelectListItem> CategoryList()
        {
            List<Category> li = listServier.select();
            List<SelectListItem> list = new List<SelectListItem>();
            
            foreach (var item in li)
            {
                SelectListItem selectList = new SelectListItem();
                selectList.Value = item.Id.ToString();
                selectList.Text = item.Administrative;
                list.Add(selectList);
            };
            return list;

        }
 public ActionResult Create()
        {
            ViewBag.sel= CategoryList();
            return View();
        }
@Html.DropDownListFor(model => model.CategoryId, @ViewBag.sel as IEnumerable<SelectListItem>, new { @class = "form-control" } )

@Html.DropDownList("CategoryId", @ViewBag.sel as IEnumerable<SelectListItem>, "选择")

MVC单选按钮

 @Html.RadioButtonFor(model => model.Sex,true, new { @checked = "checked" }) 男
                    @Html.RadioButtonFor(model => model.Sex, false) 女

MVC 弹出框、确认框

在MVC控制器里控制前台弹出对话框和基于Page的Web页面有些少出入,下面几种方法简单描述下:

单纯弹出:

return Content(@"<script>alert('xxxxxxxx');</script>");

弹出&转向:

var script = String.Format("<script>alert('修改成功!');location.href='{0}'</script>", Url.Action("Index"));
return Content(script, "text/html");

确认框 :

@Html.ActionLink("删除", "Delete", new { id = item.ID }, new { onclick="return confirm('确定要删除?')"})

前端弹出框

<a href="../Professor/Shan/@item.Id" onclick="confirm('是否删除?')">删除</a>

MVC常用语法

添加、编辑

@model Nosocomial.DTO.ExpertDTO
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>ExpertDTO</h4>
        <hr />
        <label class="text-danger">姓名</label>
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Portrait, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div id="uploadselect" class="uploadselect">
                    <input type="file" id="upload" class="upload" accept="image/*" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
                @ViewBag.Cheng
            </div>
        </div>
    </div>
}

@model Nosocomial.DTO.ExpertDTO是读取ExpertDTO中的数据

        //字段非空,最大长度160
        [Required(ErrorMessage="FirstName不能为空")]
        [StringLength(160, ErrorMessage = "FirstName太长了")]
        public string FirstName { get; set; }
        
                //正则表达式验证必须是电子邮件
        [RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}",
            ErrorMessage="邮件地址不正确")]
        public string Email { get; set; }
        
                //字段非空,数值类型最小值,最大值
        [Required]
        [Range(typeof(decimal), "0.00", "49.99")]
        public decimal Total { get; set; }
        
                //对象两个属性拥有相同的值
        [Compare("Email")]
        public string EmailConfirm { get; set; }

@Html.AntiForgeryToken()是判断ExpertDTO是否合法不合法通过@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })来显示

后台使用ModelState.IsValid判断他是否合法

if (!ModelState.IsValid)
            {
                ModelState.AddModelError("error","用户名或密码错误");
            }

查询

@model IEnumerable<Nosocomial.DTO.IndexExpertDTO>
@foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            ……
            <td>
                <a href="../Professor/Shan/@item.Id" onclick="confirm('是否删除?')">删除</a>
                <a href="../Professor/Edit/@item.Id">编辑</a>
            </td>
        </tr>
    }

其他

@using Nosocomial.DTO
@{
    int idd=0;
    var user = (MyFormsPrincipal<PatientDTO>)User;
    if (user != null) {
        idd = user.UserData.id;
    }
}
//使用
@idd

@using Nosocomial.DTO获取DTO中的类

MVC局部视图

加载部分视图

$("#result").load("/home/message",function(){
//加载完之后隐藏进度条
});
 public ActionResult message(){
   return PartialView("视图",实体);
}

分页控件的使用

页面:

 < div   id = " CommentList " >
@ { Html . RenderAction ( " Index " ,   " Comment " ,   new   {   id   =   @ Model . ProductID ,   page   =   1   } ) ; }
< / div > 

 局部视图

 @ using   Webdiyer . WebControls . Mvc ;
     @ model   PagedList < Extshop . Models . T_Comment >
     @ {
             foreach   ( var   c   in   Model )
             {
                    < div   class = " row "   >
                    < div   class = " title " > @ c . Title < / div >
                     < b > @ c . Username < / b > & nbsp ; 发表于 @ ( c . CreateTime ) < br / >
                       @ c . Description                              
                     < / div >
             }
     }
     < br   / >
     < div   class = ' pagenav ' > @ Ajax . Pager ( Model ,   new   PagerOptions { PageIndexParameterName = " page " } ,   new   AjaxOptions   {   UpdateTargetId   =   " CommentList "   } ) < / div > 
     Ajax分页的方法,这样,就可以使用Ajax自动更新该部分。在AjaxOption中定义了UpdateTargetId参数为“CommentList”,意味着当Ajax加载数据后,会自动更新id为“CommentList”的html元素内的内容 

后台:

 新建一个名称为“CommentController”的控制器,并修改index操作代码如下:

                     public   ActionResult   Index ( int   id , int ?   page )
                     {
                             ViewData [ " ProdcutID " ]   =   id ;
                             PagedList < T_Comment >   q   =   dc . T_Comment . Where ( m   = >   m . ProductID   = =   id ) . OrderByDescending ( m = > m . CreateTime ) . ToPagedList ( page   ? ?   1 , 2 ) ;
                             return   PartialView ( q ) ;
                     }

      代码中第1个参数id表示的是产品的id,第2个参数是评论的当前页。和产品列表一样,使用mvcPager进行分页。

Html.RenderPartial与Html.RenderAction的区别

 在Razor视图中语法不一样: @Html.Partial("PartialViewName") @{ Html.RenderPartial("PartialViewName",Model); }

Html.RenderAction允许你直接调用某一个Action,并把返回的结果直接显示在当前调用的View中,在Control中有一个方法并返回PartialView

Html.RenderPartial不经过Control直接通过引用页传入的Model描绘数据