We Keep Coding

.Core mvc published app partial views doesnt work in ASPNETCORE_ENVIRONMENT "production" but working fine with "development"

When Im publish my .core mvc app no matter if I lunch it by .exe or in IIS my custom partial views doesnt render. This is how it should look (when Im debbugin it localy or publish to .exe and change environment to development):
And this is how it looks after publishing on production environment:
I've noticed that after triger event that make this partial view appear in working example url doesnt change(this is what I want) and looks like this https://localhost:5002/CharacterAndItems/Index but in secound one it changes https://localhost:5002/CharacterAndItems/GetCharacter
I have no idea what causes this this problem. Here is my controller code:
[HttpPost]
public async Task<IActionResult> GetCharacter([FromForm] CharacterFindViewModel characterFindModel)
{
var character = await _characterSerivce.GetCharacterByNameAsync(characterFindModel.CharacterName);
var item = await _itemSerivce.GetItemNameReturnItem(characterFindModel.ItemName, character);
model = new CharacterWithItemViewModel { character = character, item = item };
return PartialView("_CharacterPartial", model);
}
Partial view code:
#model App.ViewModels.CharacterWithItemViewModel
<div class="row form-group" style="margin-top:15px">
<div class="col-md-6">
<div class="text-right">
<div>
<div class="text-left align-top">
Name: #Model.character.CharName CharacterId: #Model.character.ObjId ItemId: #Model.item.ItemId
<div id="Test">
Count: #Model.item.Count
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 text-right">
<form asp-controller="CharacterAndItems" asp-action="AddItems"
data-ajax="true" data-ajax-method="post"
data-ajax-mode="replace" data-ajax-update="#Test">
<input type="hidden" name="characterId" value="#Model.character.ObjId" />
<input type="hidden" name="itemId" value="#Model.item.ItemId" />
<input class="form" placeholder="Item quantity" name="count" style="text-align:center" />
<input type="submit" value="Add items" name="add" class="btn btn-primary" />
<input type="submit" value="Delete items" name="delete" class="btn btn-danger" />
</form>
</div>
</div>
#section Scripts {
<script>
$.ajax({
url: '/CharacterAndItems/AddItems',
type = 'POST',
data: JSON.stringify(#Model)
})
var results = $("#Results");
</script>
}

The fact that it even shows up means your partial view IS in fact being served. From the screenshots you've shown, it looks like you are missing your css files.
Open you prod site in chrome developer tools and inspect if the CSS files you are expecting are there, further check that they are accessible.
In Core, go to your layout page and in the header, you will see something like below. It is telling it where and what to load based upon its operating environment. Dev vs Prod. Make sure those are valid. Alos make sure that your org is not blocking a CDN if you are using one as some have rules around their network.
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
</environment>

Based on your screenshots, it doesn't look like styling is being applied when in production, which would also suggest you're facing a similar problem with necessary JavaScript files. However, we don't have your layout to see what the problem might be.
My best guess is that you have something like:
<environment include="Development>
<script src="~/js/script.js"></script>
</environment>
<environment exclude="Development>
<script src="~/js/script.min.js"></script>
</environment>
I'm just using an example of a JS file here, but the same probably applies to your CSS as well, i.e. the production reference includes a .min.js/.min.css extension, instead of just .js/.css.
By default, there's nothing that will take your JS/CSS files and minify them into .min.js/.min.css versions, so those files likely just don't even exist in production. Since all your JS/CSS file references are 404s, the style and functionality you expect don't exist either.
To have these files created, you either need to include a bundleconfig.json, or set up build tasks with something like Gulp or Grunt.
Also, FWIW, you cannot include sections in a partial, so that #section block isn't doing anything.

Antiforgerytoken MVC C# search form

I have a search box on my site.
The controller looks like this:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SearchResults(SearchModel model)
{
View:
<div class="siteSearch clearfix" role="search">
<form id="HeaderSearchForm">
#Html.AntiForgeryToken()
<label for="tbSiteSearch">Search:</label>
<input type="text" id="tbSiteSearch" name="tbSiteSearch" class="text" />
<button type="submit" class="btn submit">
<i class="icon-search"></i>
</button>
</form>
</div>
So when I do a search, I can see the hidden label with the Anti Forgery Token present. This all works as expected because if I take a blank html page, copy the form code and leave the '__RequestVerificationToken' blank, I get told that the token hasn't been set and the search doesn't run. Which is what I would expect.
The issue I have is if I submit a search, copy the token from my site and place it in to my blank html page e.g.
<html>
<body>
<script>history.pushState('', '', '/')</script>
<form action="https://www.adomainname.co.uk/Search/SearchResults/" method="POST">
<input type="hidden" name="SearchTerm" value="testing" />
<input type="hidden" name="__RequestVerificationToken" value="theverificationtokengoeshere" />
<input type="submit" value="Submit request" />
</form>
</body>
</html>
The request is submitted - even if I am running the above code on localhost. I would have expected the form to not submit as it was coming from a different domain. Am I misunderstanding how this should work?
If I refresh the page and resubmit Im obviously allocated a new AFT and so the submit fails again but this doesn't feel right.
Ideally I would prefer the form action to only run on the domain it's on and not be able to execute the action from another site. I thought using AntiForgeryToken prevent Cross-Site Request Forgery.
If any of this is unclear, please let me know and I'll explain more.

ASP.NET MVC Alternate #URIaction methods in controller linked to radio button

I have two methods in my asp.net mvc controller which search the google maps Places API to perform an autocomplete action as the user types in text.
In the background I understand that the data-otf-autocomplete function uses JQUERY UI autocomplete in the background to call these methods on the form. I have to be honest and admit I don't fully understand the JQUERY UI piece as I have adapted it from another the OdetoCode sample from the AJAX lesson on Scott Allen's excellent Pluralsight course Building Applications with ASP.NET MVC4 (Great course btw). The original code from Scott's course linked to a local database to return JSON to complete an autocomplete function which I've adapted to connect to the Google MAPS Places API.
Right now I have two search boxes each linked to a different methods on the controller. One uses the locality search (best suited to approximate addresses, most rural addresses here in Ireland fall into that category) while another is suitable for exact street addresses.
Is it possible to wire these two up to a radio button control in my view so you have a single search box and depending on the radio button option selected (say locality/address) it automatically routes the request to the associated method controller
#model IPagedList<RestaurantListViewModel>
#{
ViewBag.Title = "Home Page";
}
<form method="get" action="#Url.Action("Index")"
data-otf-ajax="true" data-otf-target="#List">
<input type="search" name="searchTerm" data-otf-autocomplete="#Url.Action("Autocomplete_Address")" />
</form>
<form method="get" action="#Url.Action("Index")"
data-otf-ajax="true" data-otf-target="#List">
<input type="search" name="searchTerm" data-otf-autocomplete="#Url.Action("Autocomplete_Locality")" />
</form>
#Html.Partial("_Restaurants", Model)

Cant you just have the search box and 2 radio buttons beside it one for each search option.
<input type="radio" name="SearchType" value="local" checked>Locality
<input type="radio" name="SearchType" value="exact">Exact Address
You just need one form then, posting to a method in the controller, in the method check for the value of the radio button and run your logic based on this.
UPDATE
Razor View:
#using (Html.BeginForm("ControllerMethod", "YourController", null, FormMethod.Post))
{
<input type="radio" name="SearchType" value="local" checked>Locality
<input type="radio" name="SearchType" value="exact">Exact Address
}
ControllerMethod
[HttpPost]
public ActionResult ControllerMethod(FormCollection form)
{
var SearchType = form["SearchType"];
........
}

Fully working code using Stephen Muecke's suggestion
#model IPagedList<RestaurantListViewModel>
#{
ViewBag.Title = "Home Page";
}
<script type = "text/javascript" >
function ShowHideDiv() {
var chkAddress = document.getElementById("chkAddress");
var inputAddbox = document.getElementById("inputAddress");
inputAddbox.style.display = chkAddress.checked ? "block" : "none";
var chkLocality = document.getElementById("chkLocality");
var inputLocality = document.getElementById("inputLocality");
inputLocality.style.display = chkLocality.checked ? "block" : "none";
}
</script>
<form method="get" action="#Url.Action("Index")"
data-otf-ajax="true" data-otf-target="#restaurantList">
<div>
<input type="search" id="inputAddress" name="searchTerm" data-otf-autocomplete="#Url.Action("Autocomplete_Address")" checked/>
<input type="search" id="inputLocality" name="searchTerm" data-otf-autocomplete="#Url.Action("Autocomplete_Locality")" />
</div>
<label for="chkAddress">
<input type="radio" id="chkAddress" name="chkType" onclick="ShowHideDiv()" />
Search by Address
</label>
<label for="chkLocality">
<input type="radio" id="chkLocality" name="chkType" onclick="ShowHideDiv()" />
Search by Location
</label>
</form>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script language="javascript">
$(document).ready(function () {
$("#inputLocality").hide();
$("#chkAddress").prop('checked', true);
});
</script>
}

How to have Google Custom Search V2 Search element on master page but result on a Child Page

I am trying to Implement the Google CSE in my site, I have formatted the look and feel of the Search box and result on google CSE site, now I want to do the following:
Have the search box on Master page so it shows up every where
Show results on a seperate page say "search.aspx", which is a child page of the Master
On Results page the Search box remain where it is in master page. and there is a div for it to show results.
I know we have following elements that can be used.
<gcse:search>
<gcse:searchbox> and <gcse:searchresults> A two-column layout
<gcse:searchbox-only> A standalone search box
<gcse:searchresults-only> A standalone block of search results.
But i suppose my requirement can only be met by using a combination of above, but not sure which one.
If any one has done this, can you please guide me what is the way to go.

a trick to that is to make a redirect to the search page placing the search on the url, eg something like:
You search everwhere (on master) for the word test, and your code if you are not on search.aspx is make a redirect to:
search.aspx?q=test
Now, inside the search.aspx, you read the query q and place it on the text box that google use to make search and that's all - ah, and one post back to google.
eg the code will looks like:
<form action="search.aspx" id="Form1">
<div>
<input type="hidden" name="cx" value="partner-pub-XXXXXXXXXX" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="46" value="<%=Server.HtmlEncode(Current.Request["q"]) %>" />
<input type="submit" name="sa" value="Search" />
</div>
</form>

MVC3 Ajax.BeginForm OnSuccess Doesn't Run in Firefox

FINAL EDIT:
After following the answer from Darin Dimitrov, I have found that the problem ended up being that the AJAX call to the Controller's method UpdateForm() was returning an empty string. This was a modification that I found necessary some time ago after experiencing a different problem. Passing an empty string was causing Firefox's parser to choke (while Chrome and IE didn't care, apparently) so I replaced the empty string with an empty div.
Edit:
Thanks to Darin Dimitrov's suggestions below, I have found that the reason I was having trouble is due to an error being thrown whenever the form in question is being submitted.
The error reads "Node cannot be inserted at the specified point in the heirarchy". This is thrown each and every time the form is submitted. I noticed in the POST data that it seems to think this is an XMLHttpRequest. Is that the cause (the AJAX request in question is just returning HTML)? Here is the POST data from Firebug:
This error reads "XML Parsing Error -- No Element Found".
FYI - the HTML being returned is always an empty string...
I have an MVC3 application running on IIS7. In one of my views, I have a form being built using a Microsoft HTML helper function:
#using (Ajax.BeginForm("UpdateForm", new AjaxOptions { UpdateTargetId = "TargetDiv", InsertionMode = InsertionMode.InsertAfter, OnSuccess = "ClearTextBox" }))
{
#Html.TextArea("txtInput", new { id = "txtInput", cols = "20", rows = "5", wrap = "virtual" })
<input id="send" class="button" type="submit" value="Send"/><br />
}
This generates the following HTML when the Controller provides this view:
<form action="/RootName/ControllerName/UpdateForm" data-ajax="true" data-ajax-mode="after" data-ajax-success="ClearTextBox" data-ajax-update="#TargetDiv" id="form0" method="post">
<textarea cols="20" id="txtInput" name="txtInput" rows="5" wrap="virtual"></textarea>
<input id="send" class="button" type="submit" value="Send"><br>
</form>
What I'm basically trying to do here is take the text inside the TextArea called txtInput and append it to the end of the Div called TargetDiv whenever the Send button above is clicked and clear out the text from txtInput after the appending is complete by means of the ClearTextBox() method (Javascript). The append always works in every browser; and when I run in Internet Explorer or Chrome, the clearing of the text works just fine. However, Firefox doesn't seem to want to call the ClearTextBox() method.
Is Firefox not compatible with this data-ajax-success option in the form signature?
Things I've Tried
I found this guy:
Ajax.BeginForm doesn't call onSuccess
The solution is to add this script:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
I am calling this script:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
...but I tried swapping it out just in case. No joy.
I was asked to try changing the method call to include parentheses by some folks in the C# chat room so that the HTML came out like this:
<form action="/WebChat/TMWC/UpdateForm" data-ajax="true" data-ajax-mode="after" data-ajax-success="ClearTextBox()" data-ajax-update="#chatText" id="form0" method="post">
<textarea cols="20" id="txtInput" name="txtInput" rows="5" wrap="virtual"></textarea>
<input id="send" class="button" type="submit" value="Send"><br>
</form>
But that didn't help.
The folks in C# Chat also suggested I replace the Javascript call with an alert - something like this:
<form action="/WebChat/TMWC/UpdateForm" data-ajax="true" data-ajax-mode="after" data-ajax-success="alert('yo!')" data-ajax-update="#chatText" id="form0" method="post">
<textarea cols="20" id="txtInput" name="txtInput" rows="5" wrap="virtual"></textarea>
<input id="send" class="button" type="submit" value="Send"><br>
</form>
While Chrome pops the message box, Firefox does not!

Status no repro in a newly created ASP.NET MVC 3 application.
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult UpdateForm()
{
return Content(DateTime.Now.ToLongTimeString());
}
}
View (~/Views/Home/Index.cshtml):
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script type="text/javascript">
function ClearTextBox() {
$('textarea').val('');
}
</script>
<form action="/Home/UpdateForm" data-ajax="true" data-ajax-mode="after" data-ajax-success="ClearTextBox" data-ajax-update="#TargetDiv" id="form0" method="post">
<textarea cols="20" id="txtInput" name="txtInput" rows="5" wrap="virtual"></textarea>
<input id="send" class="button" type="submit" value="Send"><br>
</form>
<div id="TargetDiv"></div>
Works perfectly fine in Chrome, FF and IE.
Also you might want to ensure that the Content-Type response HTTP header matches the actual response that you are sending. For example I have seen so many people send the application/json response header with some invalid JSON in the response body which produces the more sensitive parsers to choke.