Why my button is not calling action in the controller?

Question

I have EDITSTORIES partial view which must post data to UpdateStories action in Stories controller but it doesn't. It doesn't even hit the breakpoint.

@using (Html.BeginForm("UpdateStories", "Stories", FormMethod.Post, new{enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Stories</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.ID)

        <div class="form-group">
            @Html.LabelFor(model => model.Image, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Image, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Image, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Story, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Story, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Story, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Update" class="btn btn-default" />
            </div>
        </div>
    </div>
}

Action:

   [HttpPost]
        public ActionResult UpdateStories(Stories st)
        {    
            ViewBag.Grid= bo.GetAllImages();

            if (bo.UpdateImages(st))
            {
                ViewBag.Data = "Updated successfully";
            }
            else 
            {
                ViewBag.Data = "Update failed";
            }

            ViewBag.Style = "display:none";    
            return View("GetStories", st);   
        }
    }

It's inside the GetStories which is the main view. It's been a long day and still, it hasn't been done. Please help me with it.

Update:

Routes:

  routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Stories", action = "AddStories", id = UrlParameter.Optional }
            );
            routes.MapRoute(
                name: "ShowStories",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Stories", action = "ShowStories", id = UrlParameter.Optional }
            );

Update:

View: GetStories

@model HimHer.Models.Stories

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (@Html.BeginForm("GetStories", "Stories", FormMethod.Get))
{
        @Html.AntiForgeryToken()

    <div style="@ViewBag.Style">
        @{
            Html.RenderPartial("EditStories", Model);
        }


    </div>

    <hr />
    var listData = (List<HimHer.Models.Stories>)ViewBag.Grid;

    WebGrid wgImages = new WebGrid(listData, rowsPerPage: 20);
    @wgImages.GetHtml(tableStyle: "table table-condensed table-bordered table-striped table-responsive",
columns: wgImages.Columns(
                      wgImages.Column
                      (columnName: "Image", header: "Image"),
                      wgImages.Column
                      (columnName: "Story", header: "Story"),
                      wgImages.Column
                      (columnName: "Image", header: "Download", format: (testItem) => Html.ActionLink("Download", "DownloadStories", new { filename = testItem.Image })),
                      wgImages.Column
                                         (header: "Edit", format: (testitem) => Html.ActionLink("Edit", "EditStories", new { ID = testitem.ID, Story = testitem.Story, Image = testitem.Image, HiddenID = 1 }))
                     )
);



}

<h2>Index</h2>

Answer 1

You code will generate 2 forms and they are nested!.

<form action="/Stories/GetStories">
   <form action="/Stories/UpdateStories">
      <input type="submit" />
   </form>
</form>

Nested forms are invalid! This is the reason, when you click the submit button from inner form from the partial view, it is submitting to the action method defined for the outer form.

You should not be nesting forms. So move out the call to the RenderPartial outside of your BeginForm call.

Looking at the code you shared,there is no need to have the form tag in the main view as you do not have any form data you have to submit. So simply remove that.

If you absolutely want another form in the main view, make sure that, it is not creating a nested form situation. You can have 2 forms parallel in the same view

@using (@Html.BeginForm("GetStories", "Stories", FormMethod.Get))
{
   <!-- Some form elements needed for this form -->     

}

@{ Html.RenderPartial("EditStories", Model); }