Redirect window location page of partial view form in ASP.NET Core MVC

Question

I created partial view Newsletter.cshtml :

<div>
    <form class="Newsletter_form" action="/newsletter" id="nb_form" method="POST">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <input type="text" class="form-control name" placeholder="Name" name="Name" required>
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group">
                    <input type="text" class="form-control email" placeholder="Your email address" name="Email" required>
                </div>
            </div>
        </div>
        <button type="submit" name="submit" id="configreset" class="btn btn-blog submit">SUBSCRIBE</button>
    </form>
</div>

Controller is Newsletter.cs

[HttpPost]
[Route("{id}")]
public JsonResult Index(BlogNewsletter model)
{
    {
        string ret = "";

        try
        {
            var result = string.Empty;

            model.Date = new WebConfig().CurrentDateNow;
            string value = BlogViewModel.AddBlogNewsletter(model, APIUrl);
            ret = "Success";
        }
        catch (Exception ex)
        {

            ErrorLogging.logText("Add Contact exception is ---------" + ex);
        }

        return Json(ret);
    }
}
 

Model blogViewModel.cs

// Add newsLetter
public static string AddBlogNewsletter(BlogNewsletter model, string Purl)
{
    string ret = null;

    string RBody = JSON.JsonSerializer<BlogNewsletter>(model);
    string AddPurl = Purl + "/api/BlogNewsletter";

    RequestResponseType type = RequestResponseType.json;

    List<string> header = new List<string>();
    string url = APIAccess.makePostRequest(AddPurl, RBody, type, header);

    ret = url;
    return ret;
}

public class BlogNewsletter
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    public string Datestr { get; set; }
    public DateTime Date { get; set; }
}

Index page Index.cshtml

 <div class="blog-sign">
     <h6 style="padding-bottom:10px;">SIGN UP TO GET OUR NEWSLETTER</h6>
     @Html.Partial("NewsLetter", new BlogNewsletter())
 </div>

2nd page blogpost.cshtml

<div class="blog-sign">
    <h6 style="padding-bottom:10px;">SIGN UP TO GET OUR NEWSLETTER</h6>
    @Html.Partial("NewsLetter", new BlogNewsletter())
</div>

When I submit the form it goes to page

enter image description here

I know It's because of Json ret.

I want when I'll submit form After submitted Page will be remain and form will refresh without refresh whole page.

Answer 1

According to your description, I suggest you could consider using ajax to achieve your requirement.

By using ajax, you could use the ajax to post the request to the controller, then if the controller return the success json ,you could alert or generate the response according to this json file.

More details about how to use ajax inside asp.net core, I suggest you could refer to this article.

Answer 2

I just create a model popup on both pages:

@section BodyBottom{

    <div class="modal fade thankYouPop" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content" style="padding:20px;">
                <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&cross;</span></button>
                <div class="row">
                    <div class="col-sm-4"><img src="/images/aa.png"></div>
                    <div class="col-sm-8">
                        <p>Thank You! <br> We will get back to you as soon as possible. </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

And using jQuery script on both pages:

<script>
    $('form').submit(function (/*DOMEvent*/ e) {
        e.preventDefault();

        var url = $(this).attr('action'),
            data = $(this).serialize();
        $.post(url, data, function (result) {
            jQuery('.thankYouPop').modal('show');
        });
    });

    $('.thankYouPop').on('shown.bs.modal', function () {
        $('#nb_form')[0].reset();
    })
</script>

It was helpful for me.