0

mvcに連絡先ページがあります。このページに4つのテキストボックスと1つのテキスト領域があり、jqueryを使用して検証を行います。テキストボックスIDはtxtbxName、txtbxCompany、txtbxEmail、txtbxPhone、およびtxtarMessageです。txtbxNameが空白の場合、ユーザーが送信ボタンをクリックしたとき。「お名前を入力してください！」のようなメッセージが欲しいです。等々。助けてくださいありがとう

ContactController.cs 

         public ViewResult Create(string Name, string Company, string Regarding, string Email, string Phone, string Message)
         {
            string body = "Name: " + Name + "<br>" + "\nCompany: " + Company + "<br>" + "Regarding: " + Regarding + "<br>" + "Email: " +
 Email + "<br>" + "Phone: " + Phone + "<br>" + "Message: " + Message;
           try
           {                 MailMessage mail = new MailMessage();                 mail.From = new MailAddress("g@technosys.com");
                mail.To.Add("p@technosys.com");
                 mail.Subject = "Accept Request";
                 mail.Body = body;
                mail.IsBodyHtml = true;               SmtpClient smtp = new SmtpClient("smtp.gmail.com");
                smtp.Credentials = new System.Net.NetworkCredential("g@technosys.com", "1457898");
                smtp.EnableSsl = true;
                 // smtp.UseDefaultCredentials = true;
                 smtp.Send(mail);
             }
             catch (Exception ex)
             {
                 ViewData.ModelState.AddModelError("_FORM", ex.ToString());
             }
             return View();



 Jquery


 $("#btnSubmit").click(function (event) {




         var data = { Name: $("#txtbxName").val(), Company: $("#txtbxCompany").val(), Regarding:
             $("#ddlRegarding").val(), Email: $("#txtbxEmail").val(), Phone: $("#txtbxPhone").val(), Message:
             $("#txtarMessage").val()
         }




           $.ajax({
             type: "POST",
             url: "/Contact/Create",  // the method we are calling
             contentType: "application/json; charset=utf-8",
             data: JSON.stringify(data),

             dataType: "html",
             success: function (result) {
                 $("#txtbxName").val("");
                 $("#txtbxCompany").val("");
                 $("#txtbxEmail").val("");
                 $("#txtbxPhone").val("");
                 $("#txtarMessage").val("");
                 alert(result);
                 // Or if you are returning something
                 alert('I returned... ' + result.WhateverIsReturning);
             },
             error: function (result) {
                 $("#txtbxName").val("");
                 $("#txtbxCompany").val("");
                $("#txtbxEmail").val("");
                 $("#txtbxPhone").val("");
                 $("#txtarMessage").val("");

                 alert('Thanks for sending info');
                 return false;
             }
         });
     });



 Index  .cshtml


 <div class="parteners">
                 <div class="block" style="width: 270px;">
                     <div class="block" style="width: 295px; padding: 3px;">
                         Name :
                     </div>
                     <div class="block" style="width: 320px; padding: 3px;">
                         <input type="text" class="textbox" name="textfield" alt="Type our Name here" />>                         <br />
                   </div>
                     <div class="block" style="width: 295px; padding: 3px;">
                         Company :
                     </div>
                     <div class="block" style="width: 295px; padding: 3px;">
                        <input type="text" class="textbox" name="textfield2" />
                    </div>
                     <div class="block" style="width: 295px; padding: 3px;">
                         Regarding :
                     </div>
                     <div class="block" style="width: 295px; padding: 3px;">
                         <select name="select" class="textbox">
                             <option>General Inquiry</option>
                             <option>Programming Related Question</option>
                             <option>Website Quote Request</option>
                             <option>Feedback</option>
                             <option>Help and Support</option>
                         </select>
                     </div>
                 </div>
                 <div class="block" style="width: 270px;">
                     <div class="block" style="width: 295px; padding: 3px;">
                         Email :</div>
                     <div class="block" style="width: 295px; padding: 3px;">
                        <input type="text" class="textbox" name="textfield3" />
                     </div>
                     <div class="block" style="width: 295px; padding: 3px;">
                         Phone :
                     </div>
                     <div class="block" style="width: 295px; padding: 3px;">
                         <input type="text" class="textbox" name="textfield4" />
                     </div>
                 </div>
                 <div class="block" style="width: 600px; padding: 3px;">
                     Enter your Suggestions / Comments / Feedback here :
                 </div>
                 <br />
                 <div class="block" style="width: 600px; padding: 3px;">
                     <textarea class="textarea" name="textarea"></textarea><br />
                     <br />
                 </div>
                 <div class="block" style="width: 600px; padding: 3px;">
                     <input id="Button1" type="Button" value="Submit" />
                 </div>
             </div>
4

3 に答える 3

0

以下のようにクラスをすべてのテキストボックスに設定します

<input type="text" class="valcheck" title="Name" id="your_name_field_id" name="your_name_field_name" />

6つのテキストボックスすべてに対して同じことを行います。

$("#btnSubmit").click(function (event) { 

 $(".valcheck").each(function(){

  var id = this.id;
  var field_value = $("#"+id).val();

  if(field_value=="")
  {
   var field_name = $("#"+id).attr('title');
   $("#error_display_div").append("Please enter "+field_name+"<br />");
  }

//Show hide error_display_div accordingly, you can clear out the div using
// $("#error_display_div").html('');

 });
});
于 2012-10-08T05:35:24.257 に答える
0

次のようなViewModelの使用を検討する必要があります。

public class MessageVM 
{

    public string CompanyName {get;set;}

    [Required]
    public string Name {get;set;}

    public string Regarding {get;set;}

    public string Message {get;set;}

    [Required]
    public string Email {get;set;}
}

DataAnnotationsを使用します。ビューでこれを使用して、次のようにバインドします。

@Model Your.Namespace.ViewModels.MessageVM
@using(Html.BeingForm("create"))
{
    @Html.LabelFor(x => x.Name)
    @Html.TextBoxFor(x => x.Name)
    @Html.LabelFor(x => x.CompanyName)
    @Html.TextBoxFor(x => x.CompanyName)
    @Html.LabelFor(x => x.Regarding)
    @Html.TextBoxFor(x => x.Regarding)
    @Html.LabelFor(x => x.Email)
    @Html.TextBoxFor(x => x.Email)
    @Html.LabelFor(x => x.Message)
    @Html.TextBoxFor(x => x.Message)
    <button type="submit">Send!</button>
}

次に、コントローラーに次のようなメソッドを設定できます。

public ActionResult Create(MessageVM message) 
{
    if (!ModelState.IsValid)
    {
        return View(message);
    }
    //else do whatever you need, send the email etc.
}

ここでもう少し

于 2012-10-08T05:39:48.257 に答える
0

jQuery検証プラグインを調べる必要があります：http：//bassistance.de/jquery-plugins/jquery-plugin-validation/

于 2012-10-08T05:28:56.163 に答える