Ajax Results Div Hidden Until Result

Multi tool use
Multi tool use












0















I have an Ajax form which is working properly:



 <div class="row">
<div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result"></div>
<div class="col-sm-8 col-sm-offset-2">
<h4>Contact Us</h4>
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
@Html.LabelFor(a=>a.Email)
@Html.EditorFor(a => a.Email)
@Html.ValidationMessageFor(a => a.Email)

@Html.LabelFor(a=>a.Name)
@Html.EditorFor(a => a.Name)
@Html.ValidationMessageFor(a => a.Name)

@Html.LabelFor(a=>a.Phone)
@Html.EditorFor(a => a.Phone)
@Html.ValidationMessageFor(a => a.Phone)

@Html.LabelFor(a=>a.Message)
@Html.EditorFor(a => a.Message)
@Html.ValidationMessageFor(a => a.Message)
<input type="submit" class="btn btn-primary" value="Send Message" />
}

</div>


However, the results div, which I'd like to be styled as an alert, is always displaying by default. How can I make it display only when it has inner text? Is there something like @if(AjaxResult != null) { <div>...</div> }?



I suspect this can be solved within the View only, but I'm including my Controller code below for completeness:



[HttpPost]
public ActionResult Index(ContactUsViewModel model)
{
var fromAddress = new MailAddress("X", "X");
var toAddress = new MailAddress("X", "X");
string fromPassword = "X";
string subject = "GN Query";
string body = model.Message;

var smtp = new SmtpClient
{
Host = "smtp.gmail.com",
Port = 587,
EnableSsl = true,
DeliveryMethod = SmtpDeliveryMethod.Network,
UseDefaultCredentials = false,
Credentials = new NetworkCredential(fromAddress.Address, fromPassword)
};
using (var message = new MailMessage(fromAddress, toAddress)
{
Subject = subject,
Body = body
})
{
smtp.Send(message);
}

return Content("Your message has been received and we will respond within 24-48 hours.", "text/html");
}









share|improve this question



























    0















    I have an Ajax form which is working properly:



     <div class="row">
    <div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result"></div>
    <div class="col-sm-8 col-sm-offset-2">
    <h4>Contact Us</h4>
    @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
    {
    @Html.LabelFor(a=>a.Email)
    @Html.EditorFor(a => a.Email)
    @Html.ValidationMessageFor(a => a.Email)

    @Html.LabelFor(a=>a.Name)
    @Html.EditorFor(a => a.Name)
    @Html.ValidationMessageFor(a => a.Name)

    @Html.LabelFor(a=>a.Phone)
    @Html.EditorFor(a => a.Phone)
    @Html.ValidationMessageFor(a => a.Phone)

    @Html.LabelFor(a=>a.Message)
    @Html.EditorFor(a => a.Message)
    @Html.ValidationMessageFor(a => a.Message)
    <input type="submit" class="btn btn-primary" value="Send Message" />
    }

    </div>


    However, the results div, which I'd like to be styled as an alert, is always displaying by default. How can I make it display only when it has inner text? Is there something like @if(AjaxResult != null) { <div>...</div> }?



    I suspect this can be solved within the View only, but I'm including my Controller code below for completeness:



    [HttpPost]
    public ActionResult Index(ContactUsViewModel model)
    {
    var fromAddress = new MailAddress("X", "X");
    var toAddress = new MailAddress("X", "X");
    string fromPassword = "X";
    string subject = "GN Query";
    string body = model.Message;

    var smtp = new SmtpClient
    {
    Host = "smtp.gmail.com",
    Port = 587,
    EnableSsl = true,
    DeliveryMethod = SmtpDeliveryMethod.Network,
    UseDefaultCredentials = false,
    Credentials = new NetworkCredential(fromAddress.Address, fromPassword)
    };
    using (var message = new MailMessage(fromAddress, toAddress)
    {
    Subject = subject,
    Body = body
    })
    {
    smtp.Send(message);
    }

    return Content("Your message has been received and we will respond within 24-48 hours.", "text/html");
    }









    share|improve this question

























      0












      0








      0








      I have an Ajax form which is working properly:



       <div class="row">
      <div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result"></div>
      <div class="col-sm-8 col-sm-offset-2">
      <h4>Contact Us</h4>
      @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
      {
      @Html.LabelFor(a=>a.Email)
      @Html.EditorFor(a => a.Email)
      @Html.ValidationMessageFor(a => a.Email)

      @Html.LabelFor(a=>a.Name)
      @Html.EditorFor(a => a.Name)
      @Html.ValidationMessageFor(a => a.Name)

      @Html.LabelFor(a=>a.Phone)
      @Html.EditorFor(a => a.Phone)
      @Html.ValidationMessageFor(a => a.Phone)

      @Html.LabelFor(a=>a.Message)
      @Html.EditorFor(a => a.Message)
      @Html.ValidationMessageFor(a => a.Message)
      <input type="submit" class="btn btn-primary" value="Send Message" />
      }

      </div>


      However, the results div, which I'd like to be styled as an alert, is always displaying by default. How can I make it display only when it has inner text? Is there something like @if(AjaxResult != null) { <div>...</div> }?



      I suspect this can be solved within the View only, but I'm including my Controller code below for completeness:



      [HttpPost]
      public ActionResult Index(ContactUsViewModel model)
      {
      var fromAddress = new MailAddress("X", "X");
      var toAddress = new MailAddress("X", "X");
      string fromPassword = "X";
      string subject = "GN Query";
      string body = model.Message;

      var smtp = new SmtpClient
      {
      Host = "smtp.gmail.com",
      Port = 587,
      EnableSsl = true,
      DeliveryMethod = SmtpDeliveryMethod.Network,
      UseDefaultCredentials = false,
      Credentials = new NetworkCredential(fromAddress.Address, fromPassword)
      };
      using (var message = new MailMessage(fromAddress, toAddress)
      {
      Subject = subject,
      Body = body
      })
      {
      smtp.Send(message);
      }

      return Content("Your message has been received and we will respond within 24-48 hours.", "text/html");
      }









      share|improve this question














      I have an Ajax form which is working properly:



       <div class="row">
      <div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result"></div>
      <div class="col-sm-8 col-sm-offset-2">
      <h4>Contact Us</h4>
      @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
      {
      @Html.LabelFor(a=>a.Email)
      @Html.EditorFor(a => a.Email)
      @Html.ValidationMessageFor(a => a.Email)

      @Html.LabelFor(a=>a.Name)
      @Html.EditorFor(a => a.Name)
      @Html.ValidationMessageFor(a => a.Name)

      @Html.LabelFor(a=>a.Phone)
      @Html.EditorFor(a => a.Phone)
      @Html.ValidationMessageFor(a => a.Phone)

      @Html.LabelFor(a=>a.Message)
      @Html.EditorFor(a => a.Message)
      @Html.ValidationMessageFor(a => a.Message)
      <input type="submit" class="btn btn-primary" value="Send Message" />
      }

      </div>


      However, the results div, which I'd like to be styled as an alert, is always displaying by default. How can I make it display only when it has inner text? Is there something like @if(AjaxResult != null) { <div>...</div> }?



      I suspect this can be solved within the View only, but I'm including my Controller code below for completeness:



      [HttpPost]
      public ActionResult Index(ContactUsViewModel model)
      {
      var fromAddress = new MailAddress("X", "X");
      var toAddress = new MailAddress("X", "X");
      string fromPassword = "X";
      string subject = "GN Query";
      string body = model.Message;

      var smtp = new SmtpClient
      {
      Host = "smtp.gmail.com",
      Port = 587,
      EnableSsl = true,
      DeliveryMethod = SmtpDeliveryMethod.Network,
      UseDefaultCredentials = false,
      Credentials = new NetworkCredential(fromAddress.Address, fromPassword)
      };
      using (var message = new MailMessage(fromAddress, toAddress)
      {
      Subject = subject,
      Body = body
      })
      {
      smtp.Send(message);
      }

      return Content("Your message has been received and we will respond within 24-48 hours.", "text/html");
      }






      ajax asp.net-mvc






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Jan 2 at 15:49









      extensionhelpextensionhelp

      23010




      23010
























          1 Answer
          1






          active

          oldest

          votes


















          0














          You can create a partial view call _alert with your html:



          <div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
          Your message has been received and we will respond within 24-48 hours.
          </div>


          and then in your view you can set a container div in which it will be rendered when ajax call completes:



          <div id="messageContainer">
          </div>


          now your action should return that partial view and you can have a boolean in your view to decide either render or not:



           @model System.Boolean
          @if(Model)
          {
          <div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
          Your message has been received and we will respond within 24-48 hours.
          </div>
          }


          your controller action will decide either the operation was successful and show the message or not:



          bool isSuccess = true; // your logic to set this flag
          ............
          ............
          {
          smtp.Send(message);
          }

          return PartialView("_alert.cshtml",isSuccess );


          and in main view you will have :



           <div id="messageContainer">
          </div>
          @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "messageContainer" }))


          Hope it helps.






          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009265%2fajax-results-div-hidden-until-result%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            You can create a partial view call _alert with your html:



            <div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
            Your message has been received and we will respond within 24-48 hours.
            </div>


            and then in your view you can set a container div in which it will be rendered when ajax call completes:



            <div id="messageContainer">
            </div>


            now your action should return that partial view and you can have a boolean in your view to decide either render or not:



             @model System.Boolean
            @if(Model)
            {
            <div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
            Your message has been received and we will respond within 24-48 hours.
            </div>
            }


            your controller action will decide either the operation was successful and show the message or not:



            bool isSuccess = true; // your logic to set this flag
            ............
            ............
            {
            smtp.Send(message);
            }

            return PartialView("_alert.cshtml",isSuccess );


            and in main view you will have :



             <div id="messageContainer">
            </div>
            @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "messageContainer" }))


            Hope it helps.






            share|improve this answer




























              0














              You can create a partial view call _alert with your html:



              <div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
              Your message has been received and we will respond within 24-48 hours.
              </div>


              and then in your view you can set a container div in which it will be rendered when ajax call completes:



              <div id="messageContainer">
              </div>


              now your action should return that partial view and you can have a boolean in your view to decide either render or not:



               @model System.Boolean
              @if(Model)
              {
              <div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
              Your message has been received and we will respond within 24-48 hours.
              </div>
              }


              your controller action will decide either the operation was successful and show the message or not:



              bool isSuccess = true; // your logic to set this flag
              ............
              ............
              {
              smtp.Send(message);
              }

              return PartialView("_alert.cshtml",isSuccess );


              and in main view you will have :



               <div id="messageContainer">
              </div>
              @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "messageContainer" }))


              Hope it helps.






              share|improve this answer


























                0












                0








                0







                You can create a partial view call _alert with your html:



                <div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
                Your message has been received and we will respond within 24-48 hours.
                </div>


                and then in your view you can set a container div in which it will be rendered when ajax call completes:



                <div id="messageContainer">
                </div>


                now your action should return that partial view and you can have a boolean in your view to decide either render or not:



                 @model System.Boolean
                @if(Model)
                {
                <div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
                Your message has been received and we will respond within 24-48 hours.
                </div>
                }


                your controller action will decide either the operation was successful and show the message or not:



                bool isSuccess = true; // your logic to set this flag
                ............
                ............
                {
                smtp.Send(message);
                }

                return PartialView("_alert.cshtml",isSuccess );


                and in main view you will have :



                 <div id="messageContainer">
                </div>
                @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "messageContainer" }))


                Hope it helps.






                share|improve this answer













                You can create a partial view call _alert with your html:



                <div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
                Your message has been received and we will respond within 24-48 hours.
                </div>


                and then in your view you can set a container div in which it will be rendered when ajax call completes:



                <div id="messageContainer">
                </div>


                now your action should return that partial view and you can have a boolean in your view to decide either render or not:



                 @model System.Boolean
                @if(Model)
                {
                <div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
                Your message has been received and we will respond within 24-48 hours.
                </div>
                }


                your controller action will decide either the operation was successful and show the message or not:



                bool isSuccess = true; // your logic to set this flag
                ............
                ............
                {
                smtp.Send(message);
                }

                return PartialView("_alert.cshtml",isSuccess );


                and in main view you will have :



                 <div id="messageContainer">
                </div>
                @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "messageContainer" }))


                Hope it helps.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Jan 2 at 16:04









                Ehsan SajjadEhsan Sajjad

                51.1k1168125




                51.1k1168125
































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009265%2fajax-results-div-hidden-until-result%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    DRkzCZVOBCa33RGtGM47IYVmjfCHV,D1fwLtk
                    Q2xo,KWklB02kfvQnmHwLV,Ovz 7tkC43,HW 2AYlYR8p0aVrl

                    Popular posts from this blog

                    Monofisismo

                    Angular Downloading a file using contenturl with Basic Authentication

                    Olmecas