web框架MVC分部视图用途和用法

分部视图是一个非常有用的,通用视图模块,异步加载等,今天我们从一个我们在项目中碰到的问题入手来一步一步阐述,在Web开发框架中有许多的分部视图,如菜单模块。 今天我们以一个客户搜集问题/需求的小功能来讲述PartialView。

问题

PartialView error

如图所示错误,报错现象为视图引擎从下列路径中没有找到partial view '_InquiryNow',路径列举主要有两个:一个是“/Views/Common/”,一个是“/Views/Shared/”,我们可以看出寻址顺序和地方,先从调用PartialView的路由选址,再从默认路径(Shared)寻址, 如果寻不到就会抛出这个异常。

没错,我的项目中_InquiryNow.cshtml没放在上面的任何一个里面,而是放在Product目录底下,如图: PartialView inquirynow

代码

Model:ContactUsModel.cs

using System.Web.Mvc;
using FluentValidation.Attributes;
using YunM.Web.Framework;
using YunM.Web.Framework.Mvc;
using YunM.Web.Validators.Common;

namespace YunM.Web.Models.Common
{
[Validator(typeof(ContactUsValidator))]
public partial class ContactUsModel : BaseModel
{
[AllowHtml]
[NopResourceDisplayName("ContactUs.Email")]
public string Email { get; set; }

[AllowHtml]
[NopResourceDisplayName("ContactUs.Enquiry")]
public string Enquiry { get; set; }

[AllowHtml]
[NopResourceDisplayName("ContactUs.FullName")]
public string FullName { get; set; }

[AllowHtml]
[NopResourceDisplayName("ContactUs.Phone")]
public string Phone { get; set; }

[AllowHtml]
[NopResourceDisplayName("ContactUs.CompanyName")]
public string CompanyName { get; set; }

public bool SuccessfullySent { get; set; }
public string Result { get; set; }

public bool DisplayCaptcha { get; set; }

/// <summary>
/// 产品信息:ProductName+‘||’+Model
/// </summary>
public string ProductInfo { get; set; }

public bool IsPartion { get; set; }
}
}


Partion View:_InquiryNow.cshtml

@model YunM.Web.Models.Common.ContactUsModel

<div class="panel panel-default form-panel">

<div class="panel-body">
@Html.Widget("contactus_top")
@if (Model.SuccessfullySent)
{
<div class="result">
@Model.Result
</div>
}
else
{
<form action="/Common/ContactUs" method="post"></form>

<form action="/Common/ContactUs" method="post">
<div class="message-error">
@Html.ValidationSummary(true)
</div>
@Html.HiddenFor(model => model.IsPartion, new { @Value = true })
<div class="form-fields">
<div class="inputs-left">

<div class="form-group row">
@Html.LabelFor(model => model.FullName, new { @class = "col-md-2 control-label" }, ":")
<div class="col-md-6">
@Html.TextBoxFor(model => model.FullName, new { @class = "form-control", placeholder = T("ContactUs.FullName.Hint") })
</div>
<div class="col-md-4">
@Html.ValidationMessageFor(model => model.FullName)
</div>
</div>

<div class="form-group row">
@Html.LabelFor(model => model.Phone, new { @class = "col-md-2 control-label" }, ":")
<div class="col-md-6">
@Html.TextBoxFor(model => model.Phone, new { @class = "form-control", placeholder = T("ContactUs.Phone.Hint") })
</div>
<div class="col-md-4">
@Html.ValidationMessageFor(model => model.Phone)
</div>
</div>
<div class="form-group row">
@Html.LabelFor(model => model.CompanyName, new { @class = "col-md-2 control-label" }, ":")
<div class="col-md-6">
@Html.TextBoxFor(model => model.CompanyName, new { @class = "form-control", placeholder = T("ContactUs.CompanyName.Hint") })
</div>
<div class="col-md-4">
@Html.ValidationMessageFor(model => model.CompanyName)
</div>
</div>
<div class="form-group row">
@Html.LabelFor(model => model.Email, new { @class = "col-md-2 control-label" }, ":")
<div class="col-md-6">
@Html.TextBoxFor(model => model.Email, new { @class = "form-control", placeholder = T("ContactUs.Email.Hint") })
</div>
<div class="col-md-4">
@Html.ValidationMessageFor(model => model.Email)
</div>
</div>
@if (Model.DisplayCaptcha)
{
<div class="captcha-box">
@Html.Raw(Html.GenerateCaptcha())
</div>
}
</div>

<div class="form-group row">
@Html.LabelFor(model => model.Enquiry, new { @class = "col-md-2 control-label" }, ":")
<div class="col-md-6">
@Html.TextAreaFor(model => model.Enquiry, new { @class = "enquiry form-control", placeholder = T("ContactUs.Enquiry.Hint") })
</div>
<div class="col-md-4">
@Html.ValidationMessageFor(model => model.Enquiry)
</div>
</div>
</div>

<div class="buttons">
<input type="submit" name="send-email" class="button-1 register-next-step-button btn btn-default" value="@T("ContactUs.Button")" />
</div>
</form>
@* } *@
}
@Html.Widget("contactus_bottom")
</div>
</div>


调用方 View:ProductTemplate.Simple.cshtml

<div class="full-description tab-pane" id="Inquiry">
@Html.Partial("_InquiryNow", Model.ContactUsModel)
</div>


Controller:CommonController.cs

[HttpPost, ActionName("ContactUs")]
[CaptchaValidator]
public ActionResult ContactUsSend(ContactUsModel model, bool captchaValid)
{
//validate CAPTCHA
if (_captchaSettings.Enabled && _captchaSettings.ShowOnContactUsPage && !captchaValid)
{
ModelState.AddModelError("", _localizationService.GetResource("Common.WrongCaptcha"));
}

if (ModelState.IsValid)
{
string email = model.Email.Trim();
string fullName = model.FullName;

model.SuccessfullySent = true;
model.Result = _localizationService.GetResource("ContactUs.YourEnquiryHasBeenSent");
_customerService.InsertCustomization(new Customization() {
FullName=fullName,
Email=email,
Phone=model.Phone,
CompanyName=model.CompanyName,
Enquiry=model.Enquiry,
ProductInfo=model.ProductInfo,
CreatedOnUtc = DateTime.UtcNow

});

//activity log
_customerActivityService.InsertActivity("PublicStore.ContactUs", _localizationService.GetResource("ActivityLog.PublicStore.ContactUs"));

if (model.IsPartion) {
return PartialView("_InquiryNow",model);
}
return View(model);
}

model.DisplayCaptcha = _captchaSettings.Enabled && _captchaSettings.ShowOnContactUsPage;
if (model.IsPartion)
{
return PartialView("_InquiryNow", model);
}
return View(model);
}

局部视图注解

首先我们来解决上面讲的错误,其实大家应该明白我们该怎么做了,把_InquiryNow.cshtml放入基于Web开发框架二次开发项目下的/Views/Shared/目录下即可。改动后,从CommonController中调用PartialView结果如下:PartialView result

作用:1、视图模块化,可重用性强。2、可以局部刷新。3、可以高内聚业务视图。

关键语法:1、Controller:return PartialView("_InquiryNow",model)。
2、调用方 View:@Html.Partial("_InquiryNow", Model.ContactUsModel)
3、PartialView:@model YunM.Web.Models.Common.ContactUsModel    <form action="/Common/ContactUs" method="post">

注解:MVC结构,局部视图也是这种特征。
第一步建好视图层和控制层数据模型ContactUsModel.cs。
第二步建好局部视图_InquiryNow.cshtml本身,绑定模型,与控制层进行数据交互。
第三步:控制层进行逻辑处理,并与partialview层交互数据。return PartialView("_InquiryNow", model)
第四步:调用局部视图:@Html.Partial

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:华晨软件-云微开发平台 » web框架MVC分部视图用途和用法
本文标题:web框架MVC分部视图用途和用法
本文地址:http://www.hocode.com/OrgTec/UI/0005.html

相关文章: B/S开发框架 ¦

电话
电话 18718672256

扫一扫
二维码