0

I have a model called, "GetInTouch" (contact us form) with its controller and view all works fine.

My problem is that, when the app loads it has a 'Home/landing page' and I need to display this 'GetInTouch' view on the landing page which has a 'HomeController' rather than having it as a separate page. So upon 'submit' from the Landing page it should go to the 'GetInTouchController' and process the data (save and send emails) but it comes back with null.

Here is the GetInTouch MODEL

   public class GetInTouch
    {
        [Key]
        public int Id { get; set; }       
        [Display(Name = "Your Name")]
        public string YourName { get; set; }
      
        [Display(Name = "Email Address")]
        public string EmailAddress { get; set; }       
       
        [Display(Name = "Your Message")]
        public string YourMessage { get; set; }
    }

And here is the GetInTouchController

public async Task<IActionResult> Create(GetInTouch intouch)
    {
       if (ModelState.IsValid)
        {
            _GetInTouch.GetInTouch.Add(intouch);              
            await _GetInTouch.SaveChangesAsync();
            //await _emailService.SendTestEmail(options);
            return RedirectToAction(nameof(Create), new { isSuccess = true, sendId = intouch.Id });
        }
        return View(intouch.Id);            
    }

And the GetInTouch View

 @model project.Models.GetInTouch
<div class="container">
    <h3 class="display-4">Get In Touch</h3>
    <hr />
    @if (ViewBag.IsSuccess == true)
    {
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <strong>Thank You for your enquiry!</strong> We'll be in touch with you asap <br />
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    }

     <div class="row mt-5">
        <div class="col-sm-12 col-md-12">
            <h2 class="section-heading text-primary text-center no-after mb-4">
                Contact Us
            </h2>
            <form method="post" class="form-contact" autocomplete="nope" id="contactForm" data-toggle="validator" asp-action="Create" asp-controller="GetInTouch">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <input type="text" asp-for="YourName" autocomplete="nope" class="form-control" id="p_name" placeholder="Your Name" required="">
                            <span asp-validation-for="YourName" class="text-danger"></span>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <input type="email" asp-for="EmailAddress" autocomplete="new_email" class="form-control" id="p_email" placeholder="Your Email" required="">
                            <span asp-validation-for="EmailAddress" class="text-danger"></span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <textarea id="p_message"  asp-for="YourMessage" class="form-control" rows="6" autocomplete="nope" placeholder="Your Message"></textarea>
                    <span asp-validation-for="YourMessage" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <div class="text-center">
                        <div id="success"></div>                       
                        <input type="submit" value="SEND" class="btn btn-primary" />
                    </div>

                </div>
            </form>
        </div>
    </div>
</div

The above code works fine, now what I want to do is to display this 'form/view' as a section (just before the footer) in another view say Home Index View but when the user clicks 'send' it should of course go to the GetInTouchController create action and process.

So I copy the view from the GetInTouch Create View to the Home Index view just before the footer but the home page/view has a view model name, 'indexViewModel' which list data from another models but I know you can only pass one model to a view (so no way to say @model project.Model.GetInTouch, instead I have @model IndexViewModel in the HomePage) so all I want is once the user completes the form and hit 'Send' from the Home view it goes to the 'GetInTouchController' Create action and save all the details entered to the GetInTouch Model and send email (I got the email function) just need to save the data as it all comes back as null. Here is the IndexViewModel

 public class IndexViewModel
    {       
        //public IEnumerable<CategoryVM> Category { get; set; }
        public GetInTouch GetInTouch { get; set; }
    }

I don't know how to proceed, I tried copying the exact create method to the HomeController and point form to HomeController Create action but that didn't work either - any idea how to process a form in another view? Sorry about it being long but needed to explain what I want to achieve hope it's clear and thank you for your time.

Jeff
  • 115
  • 7

1 Answers1

1

As far as I know, if you want to post the data from another view, you could just set the form tag in the new view.

It will generate the form data according to the input tag and post to the GetInTouch view.

More details, you could refer to below test demo.

Notice: You should set the name in the input tag to match the GetInTouch controller:

Put below form into the index view:

IndexViewModel:

public class IndexViewModel
{
    public GetInTouch GetInTouch { get; set; }

}

View:

<form method="post" class="form-contact" autocomplete="nope" id="contactForm" data-toggle="validator" asp-action="Create" asp-controller="GetInTouch">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="row">
        <div class="col-sm-6 col-md-6">
            <div class="form-group">
                <input type="text" asp-for="GetInTouch.YourName" name="YourName" autocomplete="nope" class="form-control" id="p_name" placeholder="Your Name" required="">
                <span asp-validation-for="GetInTouch.YourName" class="text-danger"></span>
            </div>
        </div>
        <div class="col-sm-6 col-md-6">
            <div class="form-group">
                <input type="email" asp-for="GetInTouch.EmailAddress" name="EmailAddress"  autocomplete="new_email" class="form-control" id="p_email" placeholder="Your Email" required="">
                <span asp-validation-for="GetInTouch.EmailAddress" class="text-danger"></span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <textarea id="p_message" asp-for="GetInTouch.YourMessage" name="YourMessage" class="form-control" rows="6" autocomplete="nope" placeholder="Your Message"></textarea>
        <span asp-validation-for="GetInTouch.YourMessage" class="text-danger"></span>
    </div>
    <div class="form-group">
        <div class="text-center">
            <div id="success"></div>
            <input type="submit" value="SEND" class="btn btn-primary" />
        </div>

    </div>
</form>

Result:

enter image description here

Brando Zhang
  • 22,586
  • 6
  • 37
  • 65
  • Thank you so much for your answer it helps that's exactly what I was asking. So apparently I just forgot the 'name' on the input tag - thanks for helping me out. My code now works as expected. – Jeff Mar 30 '21 at 16:23
  • If you feel my reply has helped you, please mark it as answer. This will help other folks who faces the same issue and find the answer more easily. Thank you. – Brando Zhang Mar 31 '21 at 01:23