Question

我是ASP.NET的新手，我正在将Java EE Project转换为ASP.NET MVC 4，因为我必须将HTML表单视图转换为CSHTML格式

此处为表单的HTML代码：

<div id="hec-login">
<div id="login-tag-line" class="tag32">Higher Education Council Login</div>
<div id="ver-line">&nbsp; 
</div>


<div id="login-form-area">
<div class="login-username"> <input type="text" name="username" value="" id="validateHecUser_username" class="select" style="width:200px; float:left; height:42px;" placeholder="User Name">
</div>
</div>

<div id="login-form-area">
<div class="login-username"> <input type="password" name="password" id="validateHecUser_password" class="select" placeholder="Password">
</div>
</div>


<div id="login-botton">
<div class="login-username"><input type="image" alt="" src="~/Images/login.png" id="validateHecUser;jsessionid=60115189D49A29E0654E8315DA058D60_submit" name="submit" value="Log in">
</div>

</div>

达到以下水平我试图在CSHTML中获得确切的视图，

CSHTML代码：

@using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
    <legend>Log in Form</legend>
    <ol>
        <li>
            @Html.LabelFor(m => m.UserName)
            @Html.TextBoxFor(m => m.UserName)
            @Html.ValidationMessageFor(m => m.UserName)
        </li>
        <li>
            @Html.LabelFor(m => m.Password)
            @Html.PasswordFor(m => m.Password)
            @Html.ValidationMessageFor(m => m.Password)
        </li>

    </ol>
    <input type="submit" value="Log in" />
</fieldset>

我希望我能找到任何资源或方法来获得CSHTML格式的确切HTML视图

Answer 1

试试这个，

在@using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl }))

中插入表单文本输入区域的代码段

就像下面一样，

      <div id="hec-login">
    <div id="login-tag-line" class="tag32">Higher Education Council & Higher Education Institute Login</div>
    <div id="ver-line">&nbsp; 
    </div>


    @using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)


    <div id="login-form-area">
    <div class="login-username"> <input type="text" value="" name="UserName"  id="validateHecUser_username" class="select" style="width:200px; float:left; height:42px;" placeholder="User Name" >

    </div>
    </div>

    <div id="login-form-area">
    <div class="login-username"> <input type="password" value="" name="password" id="validateHecUser_password" class="select" placeholder="Password" >

    </div>
    </div>


    <div id="login-botton">
    <div class="login-username"><input type="image" alt="" src="~/Images/login.png" id="validateHecUser;jsessionid=60115189D49A29E0654E8315DA058D60_submit" name="submit" value="Log in">

    </div>

    </div>


   }   
    </div>

Answer 2

您好，我希望您先查看Microsoft virtual academy。你可以在这里找到你需要的一切。从代码我明白你使用Razor语法很棒，因为你将在提供的链接中获得所有帮助

Answer 3

这是我的理解。如果您需要更多信息，请告诉我

您已将html页面转换为mvc 4应用程序中的cshtml视图。那样就好。但是，您需要拥有一个视图模型，因为您在视图中使用了这些模型属性。
```
@Html.LabelFor(m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
```

因此，您需要创建一个模型类并将其添加到视图顶部以访问其属性。示例

@model  LoginViewModel
@Html.ValidationSummary(true)

<form>
<legend>Log in Form</legend>
<ol>
    <li>
        @Html.LabelFor(m => m.UserName)
        @Html.TextBoxFor(m => m.UserName)
        @Html.ValidationMessageFor(m => m.UserName)
    </li>
    <li>
        @Html.LabelFor(m => m.Password)
        @Html.PasswordFor(m => m.Password)
        @Html.ValidationMessageFor(m => m.Password)
    </li>

</ol>
<input type="button" id="login-button" value="Log in" onclick="location.href='@Url.Action("Index", "Login")'" />
</form>

现在你看到你有一个id = login-button的登录按钮。

您可以使用div而不是ul li。它们的工作方式与您之前使用的html页面相同。这完全取决于您的要求。这就是您的模型及其属性的定义方式。请注意数据注释。 [必需]

namespace Models
{
    public class LoginViewModel
    {
          [Required(ErrorMessage = "Please enter Username")]
          public string UserName { get; set; }
          [Required(ErrorMessage = "Please enter Password")]
          public string Password { get; set; }
    }
}

您必须为登录

namespace Controllers
{
    public class LoginController
    {
         [ValidateAntiForgeryToken]
         public ActionResult Login(LoginViewModel loginModel)
         {
            //-- Your logic here.
         }
    }
}

首先，您可以按照此操作。我希望这有帮助

将HTML表单转换为CSHTML格式

3 个答案: